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Avant-propos 



HTML est un langage aujourd'hui depasse ! II est desormais remplace par 1' association 
du langage XHTML (extensible Hyper Text Markup Language) qui permet de structurer 
precisement les contenus des sites Internet et de CSS (Cascading Style Sheets) pour creer 
la mise en page et les differentes presentations de ces contenus pour les terminaux les 
plus divers, allant du navigateur classique au telephone portable. La conception des sites 
devant se faire en deux phases (contenu et presentation), cet ouvrage est lui-meme divise 
en deux grandes parties. 

La premiere traite du langage XHTML en tant qu'outil de structuration des documents. 
Elle vous permettra d'acquerir une bonne connaissance de tous les elements disponibles 
dans ce but. A ce stade, et meme si nous indiquons la presentation par defaut liee a cha- 
cun d'eux, vous ne devriez pas vous preoccuper outre mesure de cet aspect et ne jamais 
choisir tel element en fonction de son aspect predetermine, mais en fonction de son role 
logique dans la structuration du contenu. C'est cette difference fondamentale de conception 
qui cree la veritable revolution de XHTML par rapport a HTML. 

Cette premiere partie comprend les chapitres suivants : 

• Le chapitre 1 est une introduction generale destinee a mettre en evidence les differen- 
ces entre XHTML et HTML. II definit les regies qui vous permettront de creer un 
document XHTML bien forme et conforme aux standards du W3C. II indique egale- 
ment les outils logiciels necessaires a la creation puis a la mise en place sur un serveur 
distant des pages Web que vous allez creer. 

• Le chapitre 2 vous permet de creer la structure generale d'une page conforme a 
XHTML selon la version que vous choisirez d'utiliser, sachant que nous recomman- 
dons d'utiliser la derniere version disponible, en 1' occurrence XHTML 1.1. Cette 
structure fait apparaitre les elements essentiels qui sont communs a toutes les pages, 
comme la declaration DOCTYPE. Vous y trouverez tous ceux qui constituent l'en-tete 
d'une page et qui, s'ils ne creent generalement pas de parties visibles dans un naviga- 
teur, ont un role important souvent neglige. En particulier, ils permettent par exemple 
de lier la page a des ressources externes comme une feuille de style ou des scripts 
JavaScript. Certains autres elements jouent aussi un role essentiel dans le reference- 
ment de votre site, en permettant d'inclure des informations sur le document, dites 
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meta-informations. Vous trouverez enfin dans ce chapitre une presentation de l'ensemble 
des elements incorporables dans le corps d'un document. 

• Le chapitre 3 permet de faire un tour d' horizon complet de tous les elements suscepti- 
bles de contenir du texte, les diverses formes de structuration d'une page en divisions 
et en paragraphes ainsi que tous les elements semantiques en ligne. Enfin nous decou- 
vrirons comment structurer rinformation au moyen des differentes formes de listes 
dont l'utilisation est courante dans la creation de menus par exemple. 

• Le chapitre 4 nous fait decouvrir comment inserer les differents types d' images 
admis par les navigateurs et les objets multimedias les plus divers (photos de tous 
types, sons, animations Flash...) en complement du texte dans une page. Nous ver- 
rons egalement comment diviser une image en plusieurs zones reactives aux clics du 
visiteur. 

• Le chapitre 5 presente ce qui est la base des documents hypertextes, a savoir la crea- 
tion de liens declenches a partir d'un texte, d'un bouton ou d'une image, soit entre les 
differents elements d'une meme page, soit entre les pages d'un meme site pour creer 
un systeme de navigation complet. Ces liens peuvent permettre egalement de declen- 
cher le telechargement de documents externes non affichables dans une page Web, 
l'envoi d'un e-mail ou encore un script JavaScript. 

• Le chapitre 6 nous permet d'utiliser les differents elements qui interviennent dans la 
creation de tableaux. II aborde et definit tout d'abord la structure generale commune a 
tous les tableaux. Les elements permettant la creation de lignes, de cellules et leurs 
regroupements semantiques eventuels en groupes de ligne ou de colonnes sont ensuite 
traites. Les tableaux sont envisages ici aussi bien pour permettre la structuration de 
donnees mais egalement comme moyen d'organisation d'une page. Nous precisons 
cependant les limites des tableaux en tant que technique de mise en page, l'usage des 
styles CSS etant une bonne alternative a ce type d'organisation. 

• Le chapitre 7 presente le seul moyen de rendre une page Web interactive, a savoir en y 
incorporant des formulaires. Apres avoir defini la structure globale de ces derniers, 
nous decrirons l'ensemble des composants qui permettent de saisir du texte ou des 
mots de passe, et d'effectuer des choix a l'aide de boutons radio, de cases a cocher ou 
de listes de selection d'options. Nous verrons enfin comment realiser le transfert de 
fichiers du poste client vers un serveur. Nous montrons egalement dans ce chapitre 
comment utiliser des tableaux pour ameliorer la structure d'un formulaire. 

• Le chapitre 8 presente la creation de pages avec des cadres (frames). Cette technique 
est aujourd'hui consideree comme obsolete en raison de ses nombreux inconvenients, 
mais nous la presentons par souci d'exhaustivite et parce qu'elle est encore admise 
dans la version 1 .0 de XHTML. La creation de cadres horizontaux, verticaux ainsi que 
les structures complexes y sont etudiees en utilisant l'imbrication des cadres. II est 
cependant fait reference aux techniques CSS qui permettent d'obtenir des resultats 
similaires sans creer de cadres. 
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La seconde partie de cet ouvrage traite de la creation des feuilles de style au moyen de 
CSS. Elle est le complement indispensable de XHTML puisque la premiere partie a bien 
mis 1' accent sur le fait de la separation indispensable du contenu et de la presentation. 

• Le chapitre 9 vous permet d'apprendre le fonctionnement des CSS et la syntaxe utili- 
see dans la creation des styles applicables a un document XHTML. Ce chapitre constitute 
une etape essentielle dans 1' apprentissage des CSS car il aborde les nombreux selec- 
teurs qui permettent, par exemple, d'appliquer un meme style a toutes les occurrences 
d'un element ou d'appliquer des styles differents a un meme element en fonction de 
son contexte. C'est du bon usage de ces selecteurs que dependra toute la puissance et 
la diversite d'utilisation des styles que vous allez creer par la suite. Nous y etudions 
enfin les regies d' heritage et de cascade des proprietes CSS. 

• Le chapitre 10 permet de decouvrir les proprietes de gestion des couleurs aussi bien 
pour le texte que pour le fond d'un element, puis celles qui permettent de creer des 
images de fond et leurs differents types de positionnement dans tous les elements 
XHTML. 

• Le chapitre 11 presente tout d'abord le modele de « boite » applicable a tous les ele- 
ments CSS, puis traite de la creation des bordures (style, epaisseur, couleur) applica- 
bles a chaque element individuellement. Nous y abordons egalement la creation des 
marges entre la boite d'un element et son environnement, ainsi que l'espacement entre 
son contenu et ses bordures. Toutes les proprietes abordees ici sont de nature a affiner 
la presentation a l'interieur d'un document. La notion recente de contour y est egalement 
etudiee. 

• Le chapitre 12 fait un tour d'horizon des proprietes applicables aux textes, qu'il s'agisse 
du choix d'une police de caracteres, des differentes facons de definir sa taille de maniere 
absolue ou relative par rapport au contexte, du choix de sa couleur, de son style, de sa 
casse, de sa graisse, sans oublier les nombreuses autres possibilites decoratives. Nous 
decrivons aussi la gestion des interlignes, de l'alignement et de l'espacement du texte. 
Ce chapitre presente enfin les proprietes specifiques aux liens hypertextes et les selecteurs 
particuliers qui permettent de realiser des effets dynamiques. 

• Le chapitre 13 apporte les elements essentiels qui permettent de gerer la presentation 
et la mise en page globale d'un document. Nous y etudions les methodes de dimen- 
sionnement des elements ainsi que les methodes de positionnement qui sont des avan- 
cees essentielles de 1' association CSS/XHTML par rapport a HTML. Elles permettent 
de remplacer les methodes de mise en page habituelles comme celles qui usent et abu- 
sent des tableaux ou encore celles qui utilisent des cadres. La richesse de ces proprie- 
tes permet egalement d'agir sur la visibilite et l'ordre d'empilement des elements. 
Toutes ces proprietes permettent de creer les mises en page les plus diverses. 

• Le chapitre 14 est specialement dedie aux tableaux qui possedent un modele de ges- 
tion particulier. Nous montrons comment gerer la couleur des cellules en fonction, par 
exemple, de leur appartenance a un groupe de lignes ou de colonnes. Nous etudions 
egalement la gestion des bordures des cellules, de la determination de la largeur des 
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colonnes ou de l'ensemble d'un tableau, des alignements specifiques a l'interieur des 
cellules ou des groupes, etc. 

• Le chapitre 15 est destine specifiquement aux listes qui constituent un moyen de struc- 
turation efficace, tres approprie aux menus par exemple. Nous y abordons les multi- 
ples styles de numerotation possibles pour les listes ordonnees ou a puces graphiques 
et leur position par rapport aux items. La numerotation automatique utilisant la crea- 
tion de compteurs est une autre facon de numeroter des listes generees dynamique- 
ment. La modification du rendu habituel des elements nous permet de creer des listes 
en ligne constituant par exemple des menus horizontaux, ou encore le rendu sous 
forme de liste d'un ensemble d'elements dont ce n'est pas la vocation initiale. 

• Le chapitre 16 est consacre aux moyens disponibles pour obtenir un rendu correct du 
contenu d'un document Web a l'impression, et plus generalement sur tout support 
constitue de pages calibrees (fichiers .pdf, presentations de style diaporama, ecrans de 
petite taille...). Nous signalons cependant que seul un nombre limite des proprietes 
CSS specifiques a ce type de support sont aujourd'hui supportes par l'ensemble des 
navigateurs. 

Enfin, les annexes A, B, C, et D proposent des references completes des elements 
XHTML et de leurs attributs, des proprietes CSS 2.1 et de leurs valeurs, des codes de 
couleurs conseillees sur le Web et des entites de caracteres. 

Les exercices proposes a la fin de chaque chapitre vous permettront une mise en ceuvre 
immediate des points etudies et de tester l'ensemble des connaissances acquises. 

Les corriges de ces exercices ne figurent pas dans cet ouvrage pour ne pas l'alourdir inu- 
tilement, mais ils sont telechargeables librement sur le site des editions Eyrolles 
(www.editions-eyrolles.com) et sur mon site dedie a ce sujet (www.funxhtml .com). Ils vous 
permettront de mesurer votre comprehension des notions abordees. 
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Introduction a XHTML 



II n'y aura pas de HTML 5. C'est ce qu'a confirme le W3C (World Wide Web Consor- 
tium), l'organisme qui edite les recommandations des langages du Web : le HTML est 
mort en tant que tel. Certes, pendant des annees, il a permis a tous de « bricoler » des 
pages web plus ou moins bien ficelees, mais il etait devenu trop permissif, et surtout se 
caracterisait par un manque de rigueur assez flagrant. La rivalite entre Netscape et 
Microsoft a entraine la creation de balises proprietaires utilisables uniquement dans l'un 
des navigateurs, chacun s'ingeniant a creer le gadget qui lui attirerait le plus d'utilisa- 
teurs. Cette situation ne faisait que gener les createurs de pages web qui etaient obliges 
de prevoir des solutions alternatives aux balises manquantes en fonction du navigateur 
client. II est evident que c'est la pression du e-commerce qui a provoque la disparition 
de HTML, et que la naissance de XML (extensible Markup Language) l'a precipitee. 
Le XML aurait pu l'emporter tout de suite (car a terme c'est lui qui restera), mais c'etait 
sans compter avec sa complexite et les problemes de lecture qu'il pose aux utilisateurs 
avec des navigateurs d'anciennes generations. II a done fallu definir une alternative au 
tout XML. 



Genealogie du XHTML 

XHTML (extensible Hyper Text Markup Language) est un langage de balisage (dit aussi 
langage de marquage) qui permet de structurer le contenu des pages web dans differents 
elements. Voila une definition bien abstraite, reconnaissons-le, mais nous y reviendrons 
en detail dans la section suivante en presentant la notion de balisage. 

Historiquement, les langages de balisage sont issus du langage SGML (Standard 
Generalized Markup Language) cree en 1986 pour structurer des contenus tres divers. 



I Le langage XHTML 
I Partie I 

Ce langage s'est revele trop complexe pour etre applique tel quel au Web, d'ou la necessite 
d'en creer une version allegee respectant les memes principes essentiels. 

L'inventeur du HTML (1992), Tim Berners-Lee, l'avait concu a l'origine comme un 
outil de structuration des contenus, principalement textuels, et non pas pour creer des 
presentations diversifiees. Ce sont les developpements successifs, l'essor populaire du 
Web et la concurrence acharnee entre Netscape et Microsoft pour s'emparer du marche 
des navigateurs, qui ont detourne HTML de sa vocation premiere avec l'ajout d'ele- 
ments de design qui n'avaient rien a y faire. Voulant faire mieux que 1' autre, chacun 
des deux grands a empile des couches superflues sur HTML. II est vrai que l'entree du 
Web dans le grand public necessitait de repondre a une demande d' interfaces graphiques 
plus esthetiques. 

L absence d'un langage particulier dedie uniquement a la presentation poussait effecti- 
vement les webmestres a utiliser tous les moyens pour creer des presentations visuelles 
agreables. Lapparition de CSS (Cascading Styles Sheets) en 1996 aurait du resoudre le 
probleme du detournement de HTML de sa destination premiere. Les mauvaises habitudes 
etaient prises et la facilite faisait le reste. 

L' apparition de HTML 4, et particulierement de sa version « strict » associee a l'emploi 
systematique de CSS 2 (publie en 1998), pouvait apporter une solution efficace a ce pro- 
bleme. La creation de XML (extensible Markup Language) en 1998 et son succes dans 
de multiples domaines d' application ont conduit le W3C (World Wide Web Consortium) 
a creer le langage XHTML, non plus comme une nouvelle version de HTML, mais 
comme une reformulation de HTML en tant qu' application XML. Au niveau des elements 
et des attributs disponibles, il existe a vrai dire tres peu de differences entre HTML 4 
strict et XHTML 1.1. 

Les elements, balises et attributs 

Mais au juste comment fonctionne XHTML et qu'est-ce qu'un langage de balisage ? 

Vous avez surement deja utilise un traitement de texte tel que Word. Votre texte peut com- 
prendre des titres, des paragraphes, des images, des tableaux, et vous pouvez utiliser dif- 
ferentes polices de caracteres et differentes tailles de caracteres dans le meme document. 
Le document final que vous avez realise ne laisse apparaitre que le resultat de votre mise 
en page, mais en arriere-plan, votre traitement de texte a enregistre tous les parametres de 
mise en page que vous avez utilises en plus du texte lui-meme. 

Dans un langage de balisage, tout contenu, qu'il s'agisse de texte, d'image ou d'elements 
multimedias les plus divers, doit etre renferme dans un element. En XHTML, comme 
dans HTML, chaque element a un nom determine et la liste des elements utilisables est 
limitative et clairement definie dans la DTD (Document Type Definition) liee a la version 
utilisee du langage. C'est la grande difference entre XHTML et XML, langage dans 
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lequel c'est le programmeur qui cree ses propres elements selon ses besoins. A quelques 
exceptions pres, un element a la structure suivante : 

<nom_el ement> Contenu </nom_el ement> 

Son contenu est precede par une balise d'ouverture <nom_element> et suivi par une balise 
de fermeture </nom_el ement>. Toutes les balises d'ouverture (ou marqueur) commence par 
le signe < et se terminent par le signe >. La balise de fermeture fait de meme mais le nom 
de l'element est precede d'un slash (/). Les navigateurs interpretent done les contenus en 
fonction du nom de l'element et attribuent un style par defaut a chacun de ses contenus. 

Les caracteristiques de chaque element peuvent etre precisees par des informations com- 
plementaires que Ton designe en tant qu'attributs de l'element. II peut s'agir par exemple 
de la definition de la largeur, de la hauteur ou de l'alignement du contenu. Comme nous 
le verrons, un certain nombre d'attributs sont communs a quasiment tous les elements de 
base dans les sections suivantes. 

Les attributs d'un element sont toujours definis dans la balise d'ouverture et doivent etre 
separes les uns des autres par au moins une espace typographique. Chaque attribut doit 
avoir une valeur, contrairement a ce qui se pratiquait dans HTML 4, meme s'il ne peut 
prendre qu'une valeur unique. Aucune valeur n'est done implicite du moment que l'attri- 
but figure dans la balise d'ouverture. La presence de certains attributs est obligatoire dans 
quelques elements particuliers, ce que nous preciserons systematiquement quand ce sera 
le cas. La plupart du temps, les attributs d'un element sont facultatifs et c'est au program- 
meur de determiner leur definition par rapport au cas qu'il doit traiter. Nombre d'attributs 
ont une valeur par defaut. Cela signifie que meme si on ne les definit pas dans l'element, 
celui-ci se comporte comme si nous avions defini explicitement cette valeur. II est done 
important de connaitre ce type d' attribut et de ne pas negliger de les definir avec une 
autre valeur si ce comportement par defaut n'est pas desire. La valeur de tous les attributs 
doit etre definie entre des guillemets doubles. La syntaxe conforme d'un element ayant 
des attributs est done la suivante : 

<nom_el ement attributl="valeurl" attribut2="valeur2" > Contenu de l'element 
</nom_el ement> 

Le contenu d'un element peut etre constitue de texte ou d' autres elements qui, eux- 
memes, peuvent en contenir d'autres, et ainsi de suite. Cet ensemble d'inclusion constitue 
la hierarchie du document XHTML. 

Les attributs de base de XHTML 

Dans leur quasi-totalite, les elements disponibles en XHTML ont en commun un ensem- 
ble d'attributs ayant chacun le meme role. Ces attributs se repartissent en trois categories. 
Chaque element peut avoir par ailleurs d'autres attributs particuliers. Quand nous defini- 
rons par la suite les differents elements, nous signalerons s'ils possedent ces attributs 
sans rappeler leur definition. 
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Les attributs courants (noyau) 

lis s'appliquent a quasiment tous les elements. On compte trois principaux attributs 
courants et un quatrieme encore accepte mais dont l'emploi est deconseille : 

• L'attribut id. II sert a identifier un element de maniere unique en lui donnant un nom, 
soit pour lui attribuer un style, soit pour y faire reference sans ambiguite dans un script 
JavaScript. 

• L'attribut class. II contient le nom d'une classe CSS qui contient des definitions de 
styles. Comme nous le verrons dans la deuxieme partie, son usage est tres repandu 
pour affecter des styles ponctuellement a un element. 

• L'attribut title. II contient un texte qui apparait dans une bulle quand l'utilisateur 
positionne le curseur quelques instants (ce n'est pas instantane) sur un element. Le 
texte qu'il contient peut servir a fournir une information ou une explication sur le role 
de 1' element. 

• L'attribut styl e. II permet de definir un style localement pour un element donne. II est 
encore tolere en XHTML 1.1 mais deconseille. 

Les attributs d'internationalisation 

• L attribut xml : 1 ang. II qui remplace 1' attribut 1 ang de HTML 4. 

• L'attribut dir. II indique le sens de lecture du contenu textuel d'un element ; il peut 
prendre les valeurs 1 tr (lecture de gauche a droite) ou rtl (de droite a gauche). 

Les attributs de gestion d'evenements 

Ces attributs permettent de gerer les evenements dont un element peut etre le siege et qui 
sont crees par l'utilisateur. Leur contenu est un script ecrit en general en langage Java- 
Script. Les DTD HTML 4 definissent dix attributs de gestion d'evenements, y compris 
pour des elements qui ne peuvent pas etre le siege de ces evenements. II appartient done 
aux programmeurs d'effectuer des tests pour verifier la realite des evenements pour un 
element donne. Vous trouverez ci-apres la liste des gestionnaires de base et la description 
de l'evenement correspondant. 



Tableau 1-1. Les attributs gestionnaires d'evenements communs 



attribut 


Action de l'utilisateur 


oncl i ck 


Clic sur le contenu de I'element. 


ondbl cl i ck 


Double-clic sur le contenu de I'element. 


onkeydown 


Maintien d'une touche enfoncee. 


onkeypress 


Frappe sur une touche. 


onkeyup 


Relachement d'une touche enfoncee. 
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Tableau 1-1. Les attributs gestionnaires d'evenements communs (suite) 



attribut 


Action de I'utilisateur 




onmousedown 


Enfoncement d'un bouton de la souris. 




onmousemove 


Le curseur de la souris bouge dans la zone de I'element. 




onmouseout 


Le curseur de la souris quitte la zone de I'element. 




onmouseover 


Le curseur de la souris est au-dessus de la zone de I'element. 




onmouseup 


Relachement d'un bouton de la souris au-dessus de la zone de I'element. 





D'autres attributs gestionnaires d'evenements sont specifiques a certains elements, que 
nous citerons au fur et a mesure de notre etude de ceux-ci. 



Interet des specifications 

La creation du XHTML ne consiste pas seulement en la redefinition de quelques regies 
syntaxiques pour amenager le langage HTML. S'il ne s'agissait que de cela, cet ouvrage 
n'aurait pas lieu d'etre. II s'agit bien plus selon moi d'un changement de pensee et 
d'organisation qui doit s'operer dans la creation des pages web. 

Une page web creee avec XHTML doit etre pensee en distinguant deux parties : 

• Un contenu, structure au moyen des elements XHTML (grandes divisions, titres, 
paragraphes, tableaux, images et liens, etc.). A ce stade, et meme s'il en a deja une 
idee, le createur ne doit pas necessairement avoir une idee definitive de la presenta- 
tion finale. II lui faut maitriser principalement l'organisation des informations a fournir 
a un utilisateur. 

• Une feuille de style CSS, definissant la mise en page de ces elements en fonction du 
media qui va operer le rendu du contenu (polices et tailles de caracteres, bordures, 
marges, couleurs, positionnement dans la page, etc.). Les medias se diversifient en 
effet de plus en plus en devenant des elements portables dotes de petits ecrans, et il 
n'est pas impossible que le traditionnel ecran d'ordinateur ne soit plus a l'avenir le 
principal vecteur d'affichage d'une page web. La separation du contenu et de la pre- 
sentation etant realisee, il est possible d'associer a chaque media une feuille de style 
adaptee au terminal. 

L utilisation de ces methodes presente les avantages suivants : 

• Une meilleure organisation du contenu. 

• Une meilleure qualite du code et plus grande rapidite d'affichage sur les navigateurs 
recents (Firefox, Mozilla, Internet Explorer, Netscape. . .). 

• Une reduction des couts de developpement et de maintenance des sites web ainsi 
qu'une reutilisabilite accrue et rapide du code. En effet, en ayant respecte les principes 



Le langage XHTML 

Partie I 



precedents, il est tres facile de modifier rapidement toute la presentation d'une page 
sans toucher au code XHTML. 

Les standards XHTML et CSS sont aujourd'hui incontournables pour tous ceux qui veulent 
concevoir un site web de maniere professionnelle, et tous les etudiants en informatique et 
les professionnels du Web se doivent d'acquerir ou de mettre a jour leurs connaissances 
sur ces techniques. 



Regies de base XHTML 

Un document bien forme 

Un document XHTML doit respecter certaines regies simples : 

• Les elements et les attributs sont sensibles a la casse et doivent etre ecrits en minuscules. 
Par exemple, <body> et non plus <B0DY> comme en HTML. 

• Les elements non vides doivent avoir obligatoirement une balise d'ouverture et une 
balise de fermeture. Par exemple, on ne doit plus ecrire : 

<ol> 
<li>Item 1 
CliMtem 2 

mais le code suivant : 

<ol> 

CliMteml </li> 

<li>Item2 </li> 
</ol> 

• Les elements vides ne comportent qu'une seule balise et doivent se terminer par les 
caracteres /> precedes d'une espace pour marquer la fin de l'element. Par exemple, il 
ne faut plus ecrire : 

<img src= "monimage.gif "> <hr> <br> 

mais le code suivant : 

| <img src= "monimage.gif" /> <hr /> <br /> 

• Les elements ne doivent pas se chevaucher. lis doivent done obeir au principe premier- 
ouvert-dernier-ferme. Dans ce cas, le premier element est le parent du second et celui-ci 
est enfant du premier. Par exemple, le code suivant est incorrect : 

<div> Cette division contient un titre <hl> Important ! </div> </hl> 

et doit etre remplace par : 

<div> Cette division contient un titre <hl> Important ! </hl></div> 
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• Tous les attributs doivent avoir une valeur incluse entre des guillemets doubles (")■ 
Les differents attributs du meme element doivent etre separes par au moins une espace. 
Par exemple, il ne faut plus ecrire : 

<p class=styleperso title=attention> Texte important</p> 
mais le code suivant : 

<p cl ass="styl eperso" title="attention" > Texte important</p> 

• A tous les attributs utilises doit etre donnee une valeur, y compris ceux dont la valeur 
est unique. Par exemple, il ne faut plus ecrire : 

<input type= "checkbox" checked disabled /> 

mais le code suivant : 

<input type= "checkbox" checked="checked" di sabl ed="di sabl ed" /> 

• L'attribut name qui servaient a identifier certains elements (<a>, <f orm>, par exemple) est 
supprime et doit etre remplace par l'attribut i d. 

• Les scripts et les feuilles de style qui contiennent les caracteres < et & peuvent figurer 
dans des sections CDATA de la facon suivante : 

<scri pt type="text/javascript"> 

< ![CDATA[ 
Code du script... 

]]> 
</script> 

Ces sections n'etant pas actuellement reconnues par les navigateurs, nous ne les utili- 
serons pas dans cet ouvrage, mais il faudra en tenir compte dans un avenir proche. Une 
autre solution efficace consiste a inclure les scripts ou les feuilles de style contenant 
ces caracteres dans des fichiers separes et a les inclure a l'aide de l'element <1 ink> sur 
lequel nous reviendrons en detail par la suite. 



Un document conforme 

Un document XHTML se doit egalement de respecter les regies d' inclusion des elements 
les uns dans les autres, telles qu'elles sont definies dans la DTD choisie. En effet, une 
DTD definit la liste limitative de tous les elements XHTML utilisables et enumere ceux 
qui peuvent y etre inclus. Le respect de ces contraintes est imperatif pour que le docu- 
ment soit declare conforme a la DTD. Vous trouverez a cet effet tout au long de cet 
ouvrage lors de la description des elements, et dans 1' annexe A, non pas le texte des DTD 
XHTML 1 qui est particulierement difficile a lire, mais son interpretation, pour chaque 
element, sous la forme de la liste de ses elements enfants (ceux qu'il peut inclure) et de 
ses elements parents (ceux dans lesquels il peut etre inclus). 
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Validation d'un document : le label du W3C 

Malgre toutes les verifications auxquelles vous pouvez proceder personnellement, il 
peut rester des erreurs de conformite dans votre code. Comme peut le faire un com- 
pilateur qui signale les eventuelles erreurs de syntaxe, le validateur du W3C permet 
de verifier si le code est bien forme et conforme a la DTD indiquee. Pour lancer cette 
validation automatique, vous devez soumettre l'URL ou le code de vos documents 
XHTML au validateur du W3C accessible a l'adresse suivante : http://vali- 
dator.w3.org 

La figure 1-1 montre la page de validation du site du W3C dans laquelle plusieurs 
moyens sont mis a disposition pour valider un document. Vous pouvez saisir l'URL de 
la page si le document est deja transfere sur un serveur (repere ©), choisir le fichier sur 
votre ordinateur en cliquant sur le bouton Parcourir (repere ©), ou encore ecrire le 
code a verifier directement dans une zone de saisie (repere ©). 
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Figure 1-1 

La page de validation du W3C 



Le resultat de la validation est affiche dans une nouvelle page ; si le code est conforme, 
vous obtenez une page semblable a celle de la figure 1-2, sinon la liste des erreurs ainsi 
qu'un commentaire sont fournis. 
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Figure 1-2 

La page de resultat de validation du W3C 



L'environnement de travail 

Pour creer des pages web avec XHTML et CSS, il faut etre dote d'un environnement de 
travail adapte. En theorie, un simple editeur de texte tel que le Bloc Notes de Windows ou 
Emacs sous Linux par exemple peut suffire. Cependant, comme la saisie des noms de dif- 
ferents elements XHTML dans ce type d' editeur peut devenir a la longue plutot rebar- 
bative, nous mentionnons quelques outils susceptibles de faire gagner du temps. 

Les editeurs visuels 

Dans ce type d'editeurs, vous travaillez graphiquement sur une page en y incluant des 
elements sans taper une ligne de code. Le plus connu est Dreamweaver, mais il en existe 
bien d'autres plus ou moins perfectionnes tel que Golive. L inconvenient de ces editeurs 
tient en fait a ce qui parait etre leur avantage : le code que Ton ne saisit pas est genere 
automatiquement et rien ne garantit qu'il convienne ou qu'il soit conforme aux dernieres 
specifications XHTML, car meme Dreamweaver permet l'inclusion d'elements obsoletes. 
De plus, toute generation automatique eloigne du travail de programmation et ne pre- 
sente pas un avantage evident pour la creation de pages, alors que ce peut etre le cas dans 
un editeur dedie a un langage de programmation, Java par exemple, et qui peut decharger 
le programmeur de taches repetitives. 

Outre le temps d'apprentissage et son prix eleve, je ne pense pas qu'il soit utile de faire 
appel a ce genre d'editeur qui aurait tendance a vous rendre passif. 
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Signalons egalement dans cette categorie, l'existence d'un nouvel editeur qui se veut le 
concurrent libre et gratuit de Dreamweaver pour la creation de pages web. II s'agit de Nvu, 
telechargeable sur le site http://www.nvu.com. Dans sa version actuelle, version 1.0, il est 
encore assez loin de son modele mais ses debuts sont prometteurs car il offre des fonction- 
nalites avancees, comme un editeur de styles CSS. C'est d'ores et deja un bon produit dont 
il faudra suivre les evolutions futures. La figure 1-3 presente l'espace de travail de Nvu. 
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Figure 1-3 

L 'editeur Nvu 1.0 



Les editeurs classiques 

Entre le Bloc Notes Windows et Dreamweaver, certains editeurs offrent un compromis, 
apportant a la fois une aide a la saisie en dispensant de taper soi-meme le nom des ele- 
ments et en laissant la liberte du choix de ces elements. Outre le fait qu'ils presentent 
souvent l'avantage d'etre gratuits, ces editeurs, tres nombreux et disponibles en telechar- 
gement, permettent de creer rapidement la structure d'un document en utilisant un sque- 
lette commun a toutes les pages XHTML. Nous donnerons la structure de base d'une 
telle page au chapitre 2. II vous restera ensuite a inclure dans le corps de la page les dif- 
ferents elements qui vont structurer son contenu. Si vous avez precede a une analyse 
prealable sur le papier, comme il se doit avant tout codage, cette phase de travail d' inclu- 
sion sera tres rapide. Parmi les nombreux editeurs, j'ai choisi pour ma part EditPlus qui 
s'avere tres pratique pour incorporer rapidement les differents elements XHTML et CSS. 
La figure 1-4 montre l'aspect de l'environnement de travail qu'il fournit. La fenetre de 
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l'editeur est divisee en plusieurs zones. La zone O contient le code de la page. Compor- 
tant plusieurs onglets, la zone Q permet de visualiser selon vos besoins du moment la 
liste des elements XHTML 1.1, celle des proprietes CSS 2 ou un explorateur de fichiers. 
La zone © contient en plus des menus habituels un ensemble de boutons permettant 
l'inclusion instantanee du code correspondant a une icone (lien, titres, tableaux, etc.). 
Pour incorporer un element XHTML complet, muni done d'une balise d'ouverture, une 
balise de fermeture eventuelle ainsi que certains attributs importants, il vous suffit de pla- 
cer le curseur a l'endroit desire dans le code, puis d'effectuer un double-clic sur l'ele- 
ment dans la zone de gauche (repere ©). II en est de meme pour creer une feuille de 
style : suffit d'un clic sur la propriete CSS voulue. La liste des elements XHTML et CSS 
fournie par defaut avec EditPlus est actuellement plus large que celle des elements 
conformes de XHTML 1.1, mais vous pouvez la personnaliser en enlevant des elements ou 
en en ajoutant. Si vous utilisez par exemple tres sou vent tel attribut d'un element, vous 
pouvez le raj outer, et il apparaitra ensuite systematiquement quand vous choisirez cet 
element, car la liste des elements et de leurs attributs est enregistree dans un fichier. Pour 
effectuer cette operation, effectuez un clic droit sur le nom d'un element et choisissez 
Edit. Vous pouvez ensuite proceder a toutes les modifications desirees. Vous pourrez tele- 
charger sur le site funxhtml .com/edit les fichiers xhtmlll.ctl et css21.ctl et suivre la pro- 
cedure indiquee sur le site pour obtenir dans EditPlus tous les elements XHTML 1 . 1 et 
les proprietes CSS 2.1 qui sont actuellement conformes aux recommandations du W3C. 
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Figure 1-4 

L'editeur EditPlus 



I Le langage XHTML 
I Partie I 

Tests et mise en place du site 

Une fois que vous aurez cree l'ensemble des pages de votre site, il faudra vous assurer 
qu'elles ont un aspect identique ou du moins tres semblable dans les differents naviga- 
teurs du marche et les resolutions d'ecran afferentes. Ce dernier point doit d'ailleurs 
avoir fait l'objet d'un choix initial, en particulier si les dimensions choisies pour les dif- 
ferents elements de la page sont definies de maniere fixe (en pixels par exemple), et non 
en pourcentages, ce qui represente la meilleure solution. Choisir de creer des mises en 
page en ciblant le format le plus repandu (1024 par 768 pixels actuellement par exemple) 
peut produire des resultats desagreables si le poste client est en 800 par 600 pixels ou 
moins encore. 

Si cette phase de test vous amene a constater des resultats divergents et indesirables, 
c'est sans doute que vous avez utilises des fonctionnalites non encore prises en compte 
par un navigateur particulier, et le plus souvent il s'agira de proprietes CSS encore mar- 
ginales dans Internet Explorer. II vous appartiendra alors de renoncer a certaines d'entre 
elles au moins provisoirement, pour assurer l'universalite de vos pages si tel est votre 
objectif. Nous signalons a cet effet dans la deuxieme partie de cet ouvrage les proprietes 
qui risquent de poser probleme dans certains navigateurs. 

Quand cette phase de test a ete effectuee, il ne reste plus qu'a transferer l'ensemble 
des pages du site vers le serveur distant qui va les heberger pour les mettre a la dispo- 
sition de tous. Vous devez pour cela utiliser un logiciel de transfert FTP (File Transfert 
Protocol). 



Les hebergements gratuits 

Les hebergeurs gratuits de sites personnels peuvent mettre a votre disposition des pages specialises 
permettant ce transfert via une interface web simple. Si vous disposez d'un nom de domaine sur un 
serveur dedie ou mutualise, il vous faut generalement utiliser un logiciel FTP. 



II existe de nombreux logiciels de ce type, gratuits ou payants. Je recommande pour ma 
part d'utiliser FileZilla telechargeable sur le site http://filezilla.sourceforge.net/, 
gratuit et tres pratique. La figure 1-5 presente 1' interface de FileZilla. Pour etablir une 
connexion avec le serveur et acquerir les droits en vue d'effectuer les transferts de vos 
fichiers XHTML, de vos images ou des supports multimedias, vous devez connaitre les 
parametres de connexion qui sont fournis par l'hebergeur du site. II s'agit des donnees 
suivantes : 

• Ladresse du serveur ftp, par exemple ftp . f unhtml . com (repere Q 1 

• Le nom d'utilisateur, par exemple funhtml (repere ©). 



• Le mot de passe d'acces au site (repere ©). 
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• Eventuellement, indiquez le port de communication (repere 0) (en general, il s' agit de 
la valeur 21). 

Si ces parametres sont correctement reconnus, vous avez acces a un gestionnaire de 
fichiers cote serveur similaire a celui que vous pouvez connaitre dans Windows ou 
Linux (repere 0). Dans la partie gauche, vous trouvez le meme type de gestionnaire de 
fichiers pour selectionner les fichiers presents sur votre ordinateur (repere 0). II vous 
suffit alors de realiser une operation de glisser-deposer entre ces deux zones pour que 
le transfert commence. Sa duree depend evidemment de la taille du fichier et de la 
vitesse de votre connexion. Le dossier principal cote serveur est nomme www. C'est 
dans ce dossier que le serveur ira chercher le fichier nomme index.html ou index.htm 
en reponse a la requete generale effectuee sur votre site sous la forme http:// 
www.votresite.com. C'est dans ce fichier que vous devez creer la page d'accueil du site 
(ou la page index. php si elle contient du code PHP). Dans ce dossier www, vous pou- 
vez creer autant de sous-dossiers que vous le desirez. Si vous constituez par exemple 
un sous-dossier nomme xhtml, son contenu principal devra figurer dans un nouveau 
fichier nomme encore index.html, et il sera alors accessible directement par la requete 
http://www.votresite.com/xhtnil. Dans les deux cas (repertoire principal ou sous-reper- 
toire), si vous ne creez pas de fichier nomme index.html, l'utilisateur devra ecrire une 
requete complete comprenant le nom du fichier auquel il veut acceder de la forme 
http: //www. vot res ite . com/xhtml /pa gel . html . 
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Figure 1-5 

L'interface de FileZilla 
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Referencement du site 

Une fois que vous avez cree votre superbe site conforme a XHTML et CSS, il reste 
encore une phase des plus importantes a accomplir, a savoir le faire connaitre. A moins 
de disposer de moyens publicitaires consequents, la frequentation souhaitee ne se pro- 
duira pas du jour au lendemain. Meme si c'est 1' adaptation du contenu a un besoin qui 
fait venir et revenir les internautes, il vous faut d'abord faire connaitre l'existence de 
votre site. 

Le moyen le plus simple, et generalement gratuit, est de le referencer dans les annuaires 
et moteurs de recherche les plus connus comme Google ou Yahoo afin qu'il soit bien 
place en reponse a la recherche d'un internaute. 

Des ouvrages entiers sont consacres au referencement, apportant des conseils avises pour 
augmenter la frequentation d'un site. Je recommande le site http : //www . abondance . com ou 
de se procurer l'ouvrage de son webmestre portant sur le referencement. Nous retiendrons 
cependant les quelques points suivants : 

• Si vous achetez un nom de domaine - ce qui, lie a un hebergement mutualise, est 
aujourd'hui possible a bon marche et « presente mieux » que l'hebergement gratuit 
offert par votre fournisseur d'acces dont les adresses sont tres longues -, choisissez de 
preference un nom court et facile a memoriser. Les noms longs, et particulierement 
s'ils sont composes de plusieurs mots, posent soucis a l'utilisateur qui se demande 
alors si les mots se suivent ou sont separes par des tirets, d'ou des interpretations 
divergentes et des erreurs. Certains moteurs de recherche affichent les sites repondant 
aux memes criteres par ordre alphabetique et il vaut mieux que votre nom de domaine 
commence par « a » plutot que par « z ». 

• Les extensions .com (ou .fr en France) sont preferables a .org ou .net car ce sont les 
premieres qui viennent a l'esprit des internautes s'ils ont oublie l'extension reelle. La 
notion de site commercial qui etait liee a l'extension . com a desormais disparue et votre 
site ne peut avoir aucun aspect commercial et posseder cette extension. 

• La definition d'un maximum de mots-cles rapportant objectivement le contenu de 
votre site est essentielle. Elle doit etre realisee a l'aide de 1' element : 

<meta name="keywords" content="l iste des mots cles" /> 

(voir le chapitre 2), qui est situe dans l'en-tete du document. Cette liste merite toute 
votre attention car elle est utilisee par les moteurs de recherche pour indexer vos pages 
et mettre en adequation la demande d'un internaute avec les sites qui lui correspon- 
dent. Les mots-cles se doivent de refleter fidelement le contenu du site et les idees qui 
lui sont associees, et rien d' autre. Inutile par exemple de rechercher les mots les plus 
recherches et de les inclure dans votre liste pour attirer du monde. Outre que vous ris- 
quez de tromper les internautes, vous pouvez surtout les decevoir si votre contenu ne 
correspond pas a leur attente. En revanche, n'hesitez pas a fournir une longue liste de 
mots-cles avec leurs variantes masculin/feminin et singulier/pluriel, ainsi que les mots 
derives qui peuvent correspondre a votre contenu. Vous augmenterez ainsi vos chances 
de figurer en bonne place dans les resultats des recherches effectuees par les internautes. 
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Les moteurs de recherche se basant aussi sur le contenu des pages, rien ne vous empe- 
che de faire apparaitre plusieurs fois dans le contenu les mots importants. Une astuce 
consistait a repeter ces mots dans la page et de les ecrire de la meme couleur que le 
fond de la page en creant des styles CSS appropries et non plus les balises et les attri- 
buts utilises pour definir les couleurs. Leur repetition est ainsi invisible dans la page, 
mais percue par les robots qui analysent le texte. 

• Creez la structure de vos pages en evitant l'emploi des cadres, autrefois tres en vogue, 
mais dont les contenus sont mal indexes par les moteurs de recherche. L'emploi de 
XHTML et du positionnement CSS rend ces techniques caduques et des solutions de 
remplacement peuvent etre mises a profit (voir le chapitre 13). 

• Referencez votre site dans tous les principaux moteurs de recherche. La figure 1-6 
montre par exemple la page de referencement de Yahoo qui permet de soumettre un 
site gratuitement. 
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Figure 1-6 

La page de referencement de Yahoo 
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Avant de creer des pages web et de leur donner un contenu, nous allons determiner une 
structure generale commune a toute page XHTML et qui soit en conformite avec les 
specifications du W3C. En fonction des besoins, les codes des exemples 2-1, 2-2 et 2-3 
serviront de base a la constitution de toutes nos pages. II suffira done de les copier dans 
votre editeur prefere, puis de les completer avec un contenu particulier pour chaque 
page. 

Les elements de base 

Le langage XHTML consiste en une reformulation du langage HTML, conforme aux 
prescriptions XML. Tout document XHTML peut done debuter de la meme maniere 
qu'un document XML par la declaration suivante (exemple 2-1 repere Q) : 

<?xml version="1.0" encoding="iso-8859-l"?> 

Elle sera suivie de la declaration de la DTD suivante (exemple 2-1 repere ©) : 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ 
| OTR/xhtraUl/DTD/xhtmUl.dtd"> 

Vient ensuite l'element racine <html> (exemple 2-1 repere 0) qui inclut les elements 
<head> (repere ©) et <body> (repere 0). Chacun de ces elements a un contenu et done 
une balise d'ouverture et une balise de fermeture, <head> incluant au moins l'element 
<title> (repere 0) et <body> ayant au moins un element enfant ; ici, il s'agit de <hl> 
(repere ©). La structure minimale d'un document conforme au standard XHTML 1.1 est 
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done semblable a celle de l'exemple 2.1. Le fichier contenant ce code doit avoir une 
extension .html ou .htm. 



L'extension .xml 

II est possible d'enregistrer un document XHTML sous l'extension .xml , tout comme pour un document 
purement XML. La page ainsi creee est affichee normalement dans les navigateurs modernes (Mozilla, 
FireFox, Netscape 7.2, Opera), mais pas dans Internet Explorer. Nous utiliserons par la suite l'extension 
.html. 



Exemple 2-1. Structure minimale d'un document XHTML 1.1 

<?xml version="1.0" encoding="iso-8859-l"?>0 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd">© 
<html xml : 1 ang="f r" xml ns="http: //www. w3.org/1999/xhtml ">© 
<head>© 
<title> XHTML et CSS </title>0 
</head> 
<body>© 

<!-- Tout le contenu de la page --> 
<hl>Le corps de la page minimale</hl>© 

</body> 
</html> 

Nous retrouvons bien dans cet exemple la structure arborescente decrite au chapitre 1. 
L' element racine, au sens XML du terme, est <html>, et il inclut les elements <head> et 
<body>. L'element <head> contient l'element <title>, qui est obligatoire, et l'element 
<body>, qui ne doit pas etre vide (ce qui est evident), contient un titre de niveau 1 <hl> sur 
lequel nous reviendrons plus loin. Du point de vue hierarchique, <html > est bien le parent 
ou l'ancetre de tous les autres. 



Les commentaires 

Tout ce qui est contenu entre les symboles < ! - - et --> est considere par le navigateur comme des 
commentaires et n'est pas affiche dans la page, meme s'ils se trouvent dans l'element <body>. Comme 
pour tout langage de programmation, nous avons tout interet a commenter le code XHTML afin d'en 
faciliter la relecture a posteriori. Notez toutefois que les commentaires seront visibles par I'internaute si 
celui-ci choisit d'afficher le code source de la page dans son navigateur. Evitez done d'y inclure des 
informations confidentielles et d'y faire figurer des informations privees. 



La declaration XML doit contenir le numero de version XML dans l'attribut version. Sa 
valeur est actuellement 1.0 mais une version 1.1 de XML est en cours d' elaboration. 
Cette derniere version n'est actuellement pas reconnue par les navigateurs, mais devrait 
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l'etre dans un avenir proche. L'attribut encoding de la declaration XML contient le nom 
du jeu de caracteres utilise dans le document. Pour des pages redigees en Europe occi- 
dentale, il a pour valeur iso-8859-1. La declaration XML n'est pas obligatoire dans un 
document XHTML, mais son utilisation est conseillee, en particulier dans une page ne 
contenant que du code XHTML sans ajout de script de creation de pages dynamiques. 
Dans le cas d'integration de script PHP (comme c'est couramment le cas dans une page), 
nous ne pouvons plus utiliser cette declaration car l'interpreteur PHP renvoie une erreur 
- cela peut varier selon sa configuration, mais si vous n'avez pas la haute main sur le ser- 
veur vous ne pouvez pas la modifier ; il faudra proceder a un test. En effet, ce type de 
script est inclus generalement entre les balises <?php et ?>, done selon une syntaxe simi- 
laire a celle de la declaration XML, d'ou la confusion du serveur PHP. Dans ce cas, nous 
n'utiliserons pas la declaration XML et l'indication du jeu de caracteres obligatoire est 
faite dans un element <meta /> inclus dans <head> sur lequel nous reviendrons. Pour eviter 
les problemes d' interpretation divergente entre les differents navigateurs, nous utili- 
serons systematiquement la declaration du jeu de caracteres avec l'element <meta /> dans 
chaque document, que la declaration XML y soit presente ou non. La structure minimale 
de ce type de page est done celle de l'exemple 2-2. Notez que le fichier PHP a une exten- 
sion propre, du type .phpou .php5 par exemple, toujours en fonction de la configuration 
du serveur. Pour que le document XHTML, que le serveur va finalement envoyer au navi- 
gateur, soit conforme au standard, il faut que le premier script place au debut du document 
(repere O) ne cr ee aucun code XHTML (il peut par exemple ne contenir que des fonc- 
tions) et que le second (repere ©) ne cree que du code XHTML conforme. En respectant 
ces conditions, il n'y a aucune limite a l'utilisation de scripts PHP a l'interieur d'un 
document XHTML. 

Exemple 2-2. Structure d'une page XHTML 1.1 contenant un script PHP 
<?php O 

//Ici du code PHP; 
?> 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title> XHTML et CSS </title> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 
</head> 
<body> 

<!-- Tout le contenu de la page --> 
<hl>Le corps de la page</hl> 
<?php 

echo "<h2>Ici du code PHP </h2>"; 
?> 

</body> 
</html> 
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Comme indique au chapitre 1, nous avons choisi par principe d'utiliser systematiquement la 
DTD XHTML 1.1 qui represente la version la plus evoluee et la plus porteuse d'avenir. 
Cependant, ponctuellement, les navigateurs rencontrent encore quelques problemes prati- 
ques, par exemple pour africher correctement le code cree avec cette DTD. Nous serons 
contraints en de rares occasions d'utiliser la DTD propre a la version XHTML 1.0 strict 
(exemple 2-3, repere O) qui comporte peu de differences avec XHTML 1.1 et qui est 
conforme a 1' esprit XHTML de separation du contenu et de la presentation. La suite du 
document restera la meme et obeira aux memes regies a de rares exceptions pres. La 
structure de base d'un tel document sera alors construite sur le modele de l'exemple 2-3. 

Exemple 2-3. Structure d'un document XHTML 1.0 strict 

<?xml version="1.0" encoding="iso-8859-l"?> 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-stn'ct.dtd">0 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Page XHTML 1.0 stri ct</titl e> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" />© 
</head> 
<body> 

<hl>Page XHTML 1.0 strict</hl> 
</body> 
</html> 

Nous aborderons en detail au chapitre 8 une quatrieme possibility pour la creation de la 
structure elementaire d'une page. Cette derniere concerne la composition de pages divi- 
sees en cadres independants ayant chacun comme contenu un document XHTML diffe- 
rent. Ce type de conception est aujourd'hui un peu passe de mode et n'est plus possible 
avec la DTD XHTML 1.1, mais reste realisable en XHTML 1.0 frameset pour les incondi- 
tionnels de cette methode. Dans toute la suite de cet ouvrage et sauf indication contraire 
exceptionnelle, nous n'utiliserons que la DTD XHTML 1.1 avec la structure de base pre- 
sentee a l'exemple 2-1, a laquelle nous ajoutons, comme indique plus haut, la declaration 
du jeu de caracteres dans l'element <meta>, lequel est presente ci-apres (repere ©) : 

<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-l" /> 

La declaration DOCTYPE 

Nous avons deja indique que le code d'une page XHTML devait se conformer a des 
regies precises, definies dans une DTD specifique. La declaration DOCTYPE, obligatoire 
dans tout document, precise le type de document qui va etre cree et la DTD a laquelle il 
va se conformer. La premiere partie de la declaration : 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

indique le nom generique de la DTD. La partie html donne le nom de l'element racine du 
document. 
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La seconde partie : 

"http://www.w3.org/TR/xhtnilll/DTD/xhtnilll.dtd" 

precise l'adresse du fichier xhtml 11 . dtd qui contient la DTD par elle-meme. 

Pour utiliser les variantes de XHTML 1.0, nous avons le choix entre les declarations DOC- 
TYPE suivantes : 

. I <!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ 
*»xhtml 1/DTD/xhtml 1 -strict. dtd" 

qui correspond a la version XHTML 1 .0 strict, anterieure a XHTML 1 . 1 et qui lui est pra- 
tiquement identique. C'est la plus rigoureuse des versions de XHTML 1.0. 

. I <!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ 
^•TR/xhtml 1/DTD/xhtml 1-transitional .dtd" 

Elle autorise l'utilisation d'elements obsoletes presents dans les versions anciennes du 
langage HTML, tels que <f ont> ou <center> absolument deconseilles depuis des annees. 
Cette DTD n'a ete cree par le W3C que pour assurer la compatibilite avec des documents 
HTML elabores avec HTML 4 Transitional, lui-meme cree pour assurer la compatibilite 
avec HTML 3.2. Utiliser cette DTD aujourd'hui serait une aberration et une hypocrisie 
tendant a faire croire que Ton fait du XHTML. Elle est la negation meme de 1' esprit du 
XHTML, n'en deplaise a certains, et je ne la cite ici que pour memoire en deconseillant 
formellement son usage. 

. I <!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/ 
| *»xhtml 1/DTD/xhtml 1-f rameset .dtd"> 

C'est cette declaration qui nous permettra de creer des pages comportant cadres, concep- 
tion que nous abordons au chapitre 8. 

L'element racine <html> 

C'est l'element <html> qui est l'element racine du document, au sens XML du terme. 
C'est done lui qui est le parent de tous les autres, soit directement comme <head> et 
<body>, soit indirectement par 1' intermediate de ces derniers elements. L'element <html> 
est done le conteneur de premier niveau place en haut de la hierarchie de tous les ele- 
ments du document. II n'existe que deux elements enfants de l'element <html>. En 
XHTML 1.1 et 1.0, le contenu de cet element est constitue de l'en-tete du document, 
introduit par la balise <head> et termine par la balise </head>, puis par le corps du document 
introduit par <body> et termine par </body> comme nous pouvons le verifier dans les 
exemples 2-1, 2-2 et 2-3. 

L'element racine possede trois attributs facultatifs : 

• L'attribut xml : 1 ang dont la valeur est un code de langue normalised qui indique la lan- 
gue utilisee par defaut dans la page. Cette valeur sera reconnue par les moteurs de 
recherche pour leur permettre d'indexer les pages du site en effectuant un tri par langue. 
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Elles n'apparaitront dans Google par exemple que si l'utilisateur a choisi le bouton 
« France ». 

• L'attribut dir qui indique le sens de lecture du texte de la page. II peut prendre les 
valeurs ltr pour le texte qui se lit de gauche a droite (langues europeennes) ou rtl 
pour le texte qui se lit de droite a gauche (langues orientales : hebreu, arabe). 

• L'attribut xmlns qui precise l'adresse URL de l'espace de nom utilise dans la page. 
II prend la valeur fixe http://www.w3.org/1999/xhtrnl. Un element <html> complet tel 
que nous pouvons l'utiliser s'ecrira done : 

<html xml : 1 ang="f r" dir="ltr" xmlns="http://www. w3.org/1999/xhtml " 
<!--suite des elements inclus -- 
</html> 

En pratique pour des sites ayant un contenu dans une langue europeenne, nous omettrons 
l'attribut di r. 



L'en-tete d'un document : I'element <head> 

L' element <head> englobe un certain nombre d' informations utiles au bon affichage de la 
page web. Ces informations sont contenues dans six elements differents qui ont chacun 
un role bien determine. II s'agit des elements <base>, <link>, <meta>, <script>, <style> et 
<title> dont nous allons etudier les roles respectifs. 

Aucun d'eux n'a de repercussion directement visible dans la page et seul le contenu de 
I'element <ti tl e> sera visible, non dans la page mais dans la zone de titre du navigateur. 
Le bloc d'en-tete a done la structure suivante, dans laquelle seuls les elements <title> et 
<base /> ne doivent figurer qu'une seule et unique fois, les autres n'ayant pas de limites. 

<head> 

<title>Titre de la page</title> 

<base href="http://www. monsite.com" /> 

< 1 ink rel ="shortcut icon" type="images/x-icon" href=" . . /images/favicon. ico" /> 
<meta name="Author" content="Jean ENGELS" /> 
<script type="text/javascript"> 
<!-- Scripts JavaScript --> 
</script> 

<style type="text/css" title="Styles de base"> 

<!-- Styles CSS --> 
</style> 
</head> 

Remarquons d'emblee que seuls les elements <titl e>, <script> et <style> ont un contenu, 
et done une balise fermante. 

L element <head> possede les attributs suivants : 

• xml : 1 ang qui a le meme role que dans I'element <html > ; 

• di r qui indique le sens de lecture du contenu des sous-elements de <head> ; 
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• prof i 1 e dont la valeur est une URL qui pointe vers un fichier de definitions de meta- 
donnees telles que celles definies dans les elements <meta />. A ce jour, aucun navigateur 
ne prend cet attribut en compte. 

Nous allons maintenant detailler le role de chacun des elements inclus dans <head>. 
L'adresse de base : I'element <base /> 

II s'agit d'un element vide et n'a done pas de balise de fermeture. L'information qu'il 
contient est donnee dans son unique attribut href dont l'utilisation est obligatoire. 
Le contenu de cet attribut est une URL qui fournit l'adresse de base de tous les fichiers 
utilises dans la page quand leur adresse est transmise de maniere relative. Si nous ecrivons le 
code suivant : 

<base href="http://www.funhtml .com/" /> 

le navigateur ira chercher une image dont l'URL est indiquee par /xhtml /images/moni - 
mage.gif a l'adresse : 

http: //www.funhtml .com/xhtml /images/moni mage.gif 

sur le serveur. L element <base /> possede egalement l'attribut commun id, qui ne peut 
servir qu'a modifier la valeur de l'attribut href au moyen d'un script JavaScript, selon la 
syntaxe suivante : 

document. getElementById(id_element) . href=' valeur' 

Les documents lies : I'element dink /> 

Comme le precedent element, il s'agit egalement d'un element vide dont l'information 
est contenue dans ses attributs. II permet d'etablir un lien entre la page XHTML en cours 
et un autre document externe necessaire a la page. Nous l'utiliserons particulierement 
pour lier la page a une feuille de style CSS contenue dans un fichier ayant l'extension 
.ess ou un script JavaScript contenu dans un fichier sous l'extension . js. 

L'utilisation de I'element <1 i nk /> cree 1' incorporation virtuelle de ces documents dans le 
code de la page web. On parle d' incorporation virtuelle car la page se comportera comme 
si le code des fichiers externes faisait partie de la page, le contenu de ces fichiers n'etant 
pas visible, meme en affichant le code source de la page. 

La liaison avec les fichiers externes est determinee par les attributs rel, rev, type, href, 
hreflang, media et charset. 

• Les attributs rel et rev indiquent le nom de la relation a etablir avec le fichier externe. 
lis peuvent prendre les valeurs suivantes : 

- rel = "styl esheet" si le fichier externe est une feuille de style ; 

- rel =" alternate" si le fichier est une page alternative (de rechange, proposee aux 
visiteurs dans les navigateurs) ; 

- rel="alternate stylesheet" si le fichier est une feuille de style de remplacement, 
option proposee au visiteur dans certains navigateurs ; 
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- rel="shortcut icon" pour faire reference a l'icone identifiant le site et qui s'affiche 
devant l'adresse dans les navigateurs les plus conformes (mais pas Explorer 6 !) ; 

- rel ="start" si le fichier cible est la page d'accueil ; 

- rel="previous" ou rel="prev" si le fichier designe est la page precedente dans 
l'ordre normal de consultation du site ; 

- rel="next" si le fichier est la page suivante dans l'ordre normal de consultation du 
site ; 

- rel ="i ndex" si le fichier est la page contenant l'index du contenu du site (et non pas 
la page index.html) ; 

- rel ="end" si le fichier est la page finale dans l'ordre normal de consultation du site ; 

- rel="help" si le fichier est la page d'aide ; 

- rel="glossary" si le fichier cible contient un glossaire des termes utilises dans le 
site ; 

- rel ^"chapter" si le fichier contient un chapitre ; 

- rel ="secti on" si le fichier fait reference a une section d'un chapitre ; 

- rel="appendix" si le fichier fait reference a l'appendice d' une page ; 

- rel ^"contents" si le fichier contient la table des matieres du site. 

• L'attribut type precise le type du contenu du fichier externe. II peut par exemple prendre 
les valeurs suivantes : 

type = "text/ess" pour une feuille de style CSS 

type = "text/javascript" pour un script JavaScript 

type = "text/html" ou "text/xml" 

type = "images/x-icon" pour creer une icone 

• L'attribut href contient l'adresse relative ou absolue de la ressource externe associee. 

• L'attribut href 1 ang qui, comme xml : 1 ang, prend pour valeur un code de langue, precise 
la langue utilisee dans le document cible. 

L'attribut media precise le type de media concerne par le document externe. Nous l'utili- 
serons en particulier pour lier une feuille de style en precisant le type de media vise par 
les styles du document CSS. Les valeurs de l'attribut media sont : screen (ecran d'ordi- 
nateur), print (imprimante), tty (teletype), tv (televiseur), projections (retro ou video 
projecteur), handheld (PDA, telephone), braille (terminal braille), aural (navigateurs 
oraux) et all (tous les medias). A titre d'exemple, nous pouvons ecrire les codes suivants : 

• Pour lier une feuille de style : 

< 1 ink rel="stylesheet" type="text/css" href="code.css"/> 

• Pour lier plusieurs feuilles de style en precisant le media concerne : 



Structure d'un document XHTML 



Chapitre 2 



< 1 ink rel ="styl esheet" type="text/css" href="styleWeb.css" media="screen"/> 
<link rel ="styl esheet" type="text/css" href="styleWeb.css" media="print"/> 

• Pour lier un script JavaScript : 

< 1 ink rel="script" type="text/javascript" href="code. js"/> 

• Pour creer une icone dans la barre d'adresse : 

< 1 ink rel="shorcut icon" type="images/x-i con" href="/fashion.icon" 

• Pour creer un lien de dependance vers un document : 

< 1 ink rel="next" type="text/html " href="page3. html " /> 
< 1 ink rev="previous" type="text/html " href ="pagel . html " /> 

• Pour creer un lien vers la page d'accueil : 

< 1 ink rel="start" type="text/html " href="index.html " /> 

Les navigateurs qui respectent les specifications XHTML affichent une barre de naviga- 
tion personnalisee qui peut devenir un veritable menu deroulant si on multiplie les liens 
qui permettent de passer rapidement d'une page a l'autre. La figure 2-1 montre le resultat 
obtenu par l'utilisation des elements <1 ink /> de l'exemple 2-4 dans Mozilla. 



Les commentaires 

II est toujours utile de commenter votre code XHTML, comme tout code informatique 
d'ailleurs, pour en permettre une meilleure comprehension, en particulier quand on sou- 
haite le relire un certain temps apres 1' avoir ecrit. Tout ce que vous ecrirez comme com- 
mentaires sera ignore par le navigateur, et vous pouvez done vous exprimer librement. 
Pour ecrire un commentaire, vous devez l'ouvrir avec les symboles : "<!--", et le fermer 
avec les symboles "-->". N'oubliez pas de fermer vos commentaires, sinon tout ce qui 
suit sera encore interprets en tant que tel, provoquant une erreur. Par exemple, on aura : 

<!-- Voici un commentaire HTML 

qui peut comporter plusieurs lignes 



Les meta-informations : /'element <meta /> 

L element <meta /> est egalement un element vide pour lequel 1'information est contenue 
dans ses attributs. Ces informations ne sont done pas visibles dans la page mais elles sont 
destinees au serveur web, aux navigateurs et aux moteurs de recherche. Chaque informa- 
tion est identifiee par un nom et un contenu. Le nom de 1'information est defini dans les 
attributs name ou http-equiv dont les roles sont similaires, et la valeur associee est contenue 
dans l'attribut content sous la forme suivante : 

<meta name="noml" content="val eurl" /> 
<meta http-equiv="nom2" content="valeur2" /> 



Le langage XHTML 

Partie I 



Si nous utilisons l'attribut http-equiv, 1' information indiquee dans l'attribut content sera 
presente dans les en-tetes HTTP envoyes par le serveur au navigateur sous la forme de 
couple nom/valeur. 

La plupart des valeurs des attributs name et http-equiv sont des mots-cles. Nous allons 
nous arreter sur la signification et l'utilite des plus courants d'entre eux. 

• name="author" : designe le nom de l'auteur de la page sans pour autant creer un copy- 
right. 

<meta name= "author" content="Jean Engels" /> 

• name="keywords". Cette valeur est tres importante pour le createur de site car son incor- 
poration dans un document sert a l'indexation des pages web par les moteurs de 
recherche et les annuaires. L'attribut content associe a name contient la liste des mots- 
cles que vous allez choisir comme les plus representatifs du contenu du site. Chaque 
mot ou expression est separe des autres par une virgule. II n'est pas rare d'utiliser plu- 
sieurs lignes de mots-cles dans l'attribut content. L'utilisation de l'element <meta /> a 
cette fin est done des plus utile car elle va permettre une mise en valeur de votre site 
qui apparaitra dans les reponses fournies par les moteurs de recherche si vos mots-cles 
correspondent a la demande faite par un internaute. II est important de bien choisir ses 
mots-cles pour qu'ils correspondent vraiment au contenu du site et d'en multiplier les 
variantes dans la liste de l'attribut content. On pourra retrouver le meme mot au singu- 
lier et au pluriel, au masculin et au feminin. En revanche, il serait contre-productif 
d'utiliser les mots les plus demandes dans les moteurs de recherche sous pretexte 
d'attirer du public, alors qu'ils ne correspondent pas au contenu reel de votre site. 
Exemple de code : 

<meta name=" keywords" content="XHTML, HTML, XHTML 1.1, CSS 2, design web, 
| creation de sites /> 

• name="description". Dans le meme ordre d'idee que la valeur precedente, il indique 
une breve description de l'information contenue dans le site. C'est cette description 
qui apparait dans le moteur de recherche et il est done essentiel qu'elle soit courte et 
correcte. Inutile de faire une description de 10 lignes alors que Google par exemple 
n'en affiche que deux. II est egalement fortement recommande d'utiliser cet element 
<meta /> car si vous ne donnez pas vous-meme une description de la page, Google et 
les autres moteurs de recherche utilisent les premieres lignes de votre page qui ne sont 
pas necessairement les plus explicites. Exemple de code : 

<meta name="Description" content="Le site du livre » XHTML et CSS » 
| de Jean Engels Editions Eyrolles" /> 

• name="robots". Cette valeur permet de donner des directives aux robots des moteurs de 
recherche qui parcourent le Web automatiquement pour en indexer les pages. En fonc- 
tion de la valeur de l'attribut content, vous pouvez choisir la maniere dont vos pages 
seront indexees. Les valeurs possibles sont les suivantes : 

- con tent=" none" ou "noindex", si vous voulez empecher l'indexation d'une page par- 
ticuliere. 
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- content="index", pour autoriser l'indexation de la page, ce qui est plus que recom- 
mande. 

- content="follow", pour autoriser l'indexation simultanee de la page concernee et 
des pages qui sont les cibles des liens contenus dans cette page. Le choix de cette 
valeur peut etre risque car il peut conduire a des indexations en chaine si les pages 
cibles font de meme. Si vos liens sont tous internes, n'hesitez pas a l'utiliser. 

- content="nof ol 1 ow", pour empecher cette indexation des pages liees. 
Exemple de code : 

<meta name="robots" content=" index" /> 

• name=" revisit-after". Cette valeur precise aux robots des moteurs de recherche la 
periodicite des passages du robot sur le site. Nous l'utiliserons pour des sites dont le 
contenu evolue regulierement. L'attribut content definit cet intervalle en nombres de 
jours. On ecrira par exemple le code : 

<meta name="revisit-after" content="15 days"/> 

• http-equiv="refresh". Quand il est associe a l'attribut content qui a pour valeur un 
nombre de N secondes, son utilisation permet de forcer le navigateur a recharger la 
page toutes les N secondes. On procedera ainsi pour un site aux informations renouve- 
lees tres frequemment, par exemple un site de cotation boursiere, ou comme precede 
pour afficher l'heure regulierement par exemple a l'aide d'un script JavaScript ou 
PHP. Nous pouvons egalement utiliser cet element pour rediriger automatiquement le 
visiteur vers une autre page du meme site ou encore d'un autre site. On appliquera 
cette technique si le contenu du site a change de nom de domaine. Pour cela, l'attribut 
content doit contenir le nombre N de secondes avant lequel la redirection sera effec- 
tuee, suivi d'un point-virgule (;) et de l'URL absolue de la nouvelle page. Par exem- 
ple, pour rediriger vers une autre page au bout de dix secondes nous ecrivons le code 
suivant : 

<meta http-equiv="refresh" content="10; http:/www. funphp.com/index/> 

• http-equiv="Content-type". Cette valeur de l'attribut permet de definir simultanement 
le type du document et le jeu de caracteres utilises dans la page. Comme nous l'avons 
deja signale, il faut l'utiliser imperativement si le jeu de caracteres n'a pas ete precise 
dans la declaration XML ou si celle-ci est absente, comme dans le cas des pages PHP. 
Si cette declaration n'est pas faite, l'utilisation de cet element <meta /> est indispensa- 
ble sinon le document n'est pas valide par le W3C. L'attribut content contient alors le 
type du document suivi d'un point-virgule puis du code du jeu de caracteres. Nous 
avons par exemple le code suivant : 

<meta http-equiv="Content-type" content="text/html ;charset=iso-8859-l" /> 

• http-equi v="expi res ". Sauf specification contraire effectuee dans le reglage des prefe- 
rences de son navigateur, quand un utilisateur visite votre site, la page vue est mise en 
memoire cache de son ordinateur. Elle s'affiche alors plus rapidement s'il y revient, 
meme si le contenu du site a change. Le visiteur peut bien sur forcer le navigateur a 
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actualiser la page comme vous devez le faire pour tester les modifications apportees a 
une page lors des phases de tests. Pour forcer cette mise a jour, il faut definir une date 
dans l'attribut content associe a http-equiv. Quand la date du jour est posterieure a la 
date definie dans content, le navigateur recharge la page. Les dates sont donnees en 
anglais au format "Mon, 11 Jul 2005 18:34:45 GMT" pour le 11 juillet 2005 a 18 h 34 min 
45 en temps GMT. Nous ecrirons par exemple : 

<meta http-equiv="expires" content="Mon , 11 Jul 2005 18:34:45 GMT" /> 

Les scripts internes : I'element <script> 

Nous avons vu qu'il etait possible de lier la page XHTML avec un fichier externe conte- 
nant du code JavaScript au moyen de I'element <link />. Si cette solution correspond 
bien a 1' aspect XHTML de separation des fichiers ayant chacun un role different, il est 
egalement possible de realiser la meme operation avec I'element <script> qui sera alors 
vide. Le type de langage utilise est precise dans l'attribut type qui est obligatoire 
etcontient generalement la valeur text/ javascri pt pour JavaScript mais qui peut etre ega- 
lement text/vbscript pour le langage VBScript qui est cependant marginal vis-a-vis de 
JavaScript. Dans le cas d'un fichier externe, il faut utiliser l'attribut src qui donne l'URL 
du fichier externe du script qui possede 1' extension . js pour JavaScript. Nous aurions par 
exemple le code suivant : 

<script type=" text/ javascript" src="http: //www.f unhtml /xhtml /f ichiercode. js"> 
</script> 

II est toujours possible d'incorporer du code JavaScript dans une page XHTML au 
moyen de I'element <script> mais, a la difference de l'utilisation precedente, le code du 
script est inclut entre les balises <script> et </script>. Dans ce cas, seul l'attribut type est 
requis. II est d'usage courant d'inclure tout le code JavaScript dans un commentaire situe 
a l'interieur de I'element <script> pour qu'il ne soit pas interprete par les navigateurs 
depourvus d'interpreteur (si ca existe encore !) mais aussi et surtout si le visiteur a volon- 
tairement interdit 1' execution des scripts JavaScript. 

Nous pouvons par exemple ecrire le code suivant : 

<script type="text/javascript"> 
<! — 

function debut( ) 
{alert( 'Bonjour XHTML');} 
--> 
</script> 

En plus de l'attribut id commun a la plupart des elements, I'element <script> possede 
egalement les attributs suivants dont le role est annexe par rapport aux precedents : 

• charset pour preciser le jeu de caracteres utilises dans I'element ; 

• defer dont la seule valeur autorisee est defer. S'il est utilise, l'interpreteur JavaScript 
du navigateur n' interprete pas le code contenu dans I'element avant l'affichage de la 
page, ce qui rend l'affichage plus rapide. Cet attribut ne sera utilise que si le code ne 
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contient pas d' instructions provoquant un affichage direct dans la page du type de 
celles realisees au moyen de la fonction write () ; 

• xml : space dont la seule valeur possible est preserve et qui a pour fonction de conserver 
intacts les differents espaces contenus dans le texte du code. Deux espaces consecutifs 
ou des tabulations sont done conserves. 

A la difference des autres elements presents dans l'en-tete du document, l'element 
<script> peut etre utilise egalement dans le corps du document, directement inclut entre 
les balises <body> et </body>, ou indirectement dans de nombreux autres elements inclus 
eux-memes dans <body> et dont la liste figure dans le tableau 2-1. 

Tableau 2-1. Les elements parents de l'element <script> 

a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, cite, code, dd, del, dfn, div, dt, em, 
fieldset, form, hi , h2, h3, h4, h5, h6, head, i, ins, kbd, label, legend, li, noscript, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var 

Le code suivant utilise l'element <script> et tous ses attributs : 

<script type="texte/javascri pt" charset="iso-8859-l" defer="defer" 

xml :space="preserve"> 
<!-- Code JavaScript -- > 
</script> 

L incorporation des styles : l'element <style> 

L'utilisation des styles CSS est etroitement liee a XHTML. Nous avons vu qu'ils pou- 
vaient le plus souvent etre ecrits dans un fichier externe lie a la page avec l'element <1 i nk />. 
Cependant, comme pour les scripts, il est possible de les ecrire directement dans le code 
XHTML en tant que contenu de l'element <styl e>. II n'est pas interdit d'ecrire tous les 
styles dans cet element mais cette possibility sera reservee aux cas ou les styles sont peu 
nombreux. II est aussi envisageable de lier un fichier externe contenant les styles com- 
muns a toutes les pages d'un site avec <1 i nk /> et d'ajouter des styles particuliers a une 
page dans l'element <styl e> de celle-ci. 

En plus des attributs id, xml : 1 ang, di r et ti tl e que nous avons deja rencontres, l'element 
<style> possede les attributs suivants : 

• L'attribut type, dont la presence est obligatoire, precise le type des feuilles de style 
utilisees. Pour les documents XHTML, il prend toujours la valeur text/ess ; 

• L'attribut media precise le type de media concerne par la feuille de style . II est done 
possible d'incorporer plusieurs elements <style> dans l'en-tete de la page, chacun 
etant destine a un media different (voir l'exemple 2-4). II prend les valeurs suivantes : 
screen (ecran d' ordinate ur), print (imprimante), tty (teletype), tv (televiseur), projec- 
tions (retro ou video projecteur), handheld (PDA, telephone) braille (terminal 
braille), aural (navigateur oral) et al 1 (tous les medias) ; 
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• L'attribut xml :preserve, deja rencontre, prend la valeur unique preserve si Ton desire 
que les espaces ecrits dans le code CSS soient conserves ; 

• Le code suivant definit une couleur de fond jaune pour la page et une couleur bleue 
pour le texte ; 

<style type="text/css" media="screen" 

body {background-col or: yellow; col or: blue;} 
</style 

Nous reviendrons en detail sur l'ecriture des styles dans la deuxieme partie de cet 
ouvrage. II nous faut simplement retenir ici la localisation des styles. 

Le titre de la page : I'element <title> 

Chacun a pu remarquer dans son navigateur qu'avant l'affichage complet d'une page 
web, un titre apparait dans la barre de titre situee en haut de la fenetre du navigateur. Ce 
texte est defini dans I'element <title> qui est le seul dont la presence soit obligatoire 
dans I'element <head>. Son contenu est un simple texte qui doit resumer le contenu de la 
page en une ligne maximum. II est important de bien rerlechir a ce contenu car c'est aussi 
lui qui apparaitra comme titre principal du site dans les moteurs de recherche. II doit 
done etre accrocheur et bien correspondre a l'esprit de la page. Nous aurons par exemple 
le code suivant : 

<title>Le site de XHTML 1.1 et CSS 2 </title> 

L' element <ti tl e> possede les attributs xml : 1 ang, di r et i d que nous avons deja rencontres. 

L' exemple 2-4 cree une page en utilisant tous les elements possibles de l'en-tete <head> 
dont <title> (repere ©). <base /> (repere ©), un grand nombre d'elements <meta /> 
(repere ©) et <link /> (repere ©), les elements <style> (repere 0) et <script> (repere ©). 
L' element <body> (repere Q i contient un minimum d'elements pour obtenir un affichage. 
Nous reviendrons dans la section suivante sur cet element et ce qu'il peut contenir. 



Exemple 2-4. Les elements de l'en-tete du document 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml " > 
<head> 

<!-- Element <title> -->© 

<title> XHTML et CSS </title> 

<!-- Element <base /> -->© 

<base href="http://www.funhtml .com/xhtml/" /> 

<!-- Elements <meta /> -->© 
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<meta name="Author" content="Jean ENGELS"/> 

<meta name="Keywords" content="XHTML, CSS 2, Web" /> 

<meta name="Description" content="Le site du livre » XHTML et CSS » 

de Jean Engels Editions Eyrolles" /> 

<meta http-equiv="Content-type" content="text/html ; charset=iso-8859-l" /> 

<meta http-equiv="Charset" content="i so-8859-1" /> 

<meta http-equiv="Content-Script-Type" content="text/javascript" /> 

<meta http-equiv="Content-Style-Type" content="text/css" /> 

<meta name="revisit-after" content="15 days" /> 

<meta name="robots" content="index,fol low" /> 

<meta http-equiv="ref resh" content="1250;llRL=http://www.funhtml .com/xhtml " /> 
**************** 

<!-- Elements <link /> -->© 

< 1 ink rel="shortcut icon" type="images/x-icon" 

^» href="/xhtml/images/favicon.ico" /> 

< 1 ink rel ="styl esheet" type="text/css" href="/xhtml/C2/messtyles.css" /> 
<link rel="next" title="PHP 5" type="text/html " 
href="http://www.funhtml .com/php5" /> 

< 1 ink rel="start" title="Accueil " type="text/html " 

href="http://www.funhtml .com/xhtml " /> 

< 1 ink rel ="previous" titl e="Document XML" type="text/xml " 

href="/xhtml/C2/exemple2-l.xml" /> 

< 1 ink rel="index" title="L'index" type="text/httnl " 

href="http://www. funphp.com/lindex. html " /> 

< 1 ink rel="chapter" title="Chapitre 1" type="text/html " 

href="http: //www. funhtml .com/xhtml /chl .html " /> 

< 1 ink rel="chapter" title="Chapitre 2" type="text/html " 

href="http://www. funhtml .com/xhtml /ch2. html " /> 

< 1 ink rel="chapter" title="Chapitre 3" type="text/html " h 

ref="http: //www. funhtml . com/xhtml /ch3. html " /> 

< 1 ink rel="glossary" titl e="Gl ossai re" type="text/html " 
^» href="http: //www. f unphp.com/xhtml /glossai re. html " /> 

< 1 ink rel="section" title="Section 1" type="text/html " 
^» href="http://www.f unphp.com/xhtml /sectl . html " /> 

< 1 ink rel="contents" titl e="Sommai re" type="text/html " 

href="http://www. funphp.com/xhtml/somm. html " /> 
< 1 ink rel ="appendix" title="Appendice" type="text/html " 
^» href="http: //www. funphp.com/xhtml /append. html " /> 
************** 

<!-- Element <style> -->© 
<!-- <style type="text/css" medi a="screen"> 
body {background-col or:yel 1 ow;col or:bl ue; } 
</style>--> 

<!-- <style type="text/css" media="print"> 
body {background- col or: white; col or: green; ) 
</style>--> 

*************** 

<!-- Element <script> -->© 
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<script type="text/javascript"> 

function debut( ) 

{alert( 'Bonjour XHTML');} 
</script> 

<script type="text/javascri pt" src="http: //www.f unhtml /xhtml If i chiercode. js"> 
</script> 
</head> 

<body onl oad="debut( ) ">© 
<!-- Tout le contenu de la page --> 
<hl>Le corps de la page</hl> 
<P> 

<img src="/xhtml/images/php5_logo.gif" a 1 1 = " P H P 5" /> 
</p> 
</body> 
</html> 



La figure 2-1 montre le resultat obtenu, et en particulier la barre de navigation du site 
dans Mozilla, grace a l'utilisation des differents elements < 1 ink /> dans l'en-tete du docu- 
ment de l'exemple 2-4. Mozilla est le seul navigateur, avec Opera (dans une moindre 
mesure), a exploiter ces elements pour creer une barre de navigation. 
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L'utilisation des elements <link/> de l'en-tete 
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Le corps du document : {'element <body> 

La plupart des elements de l'en-tete <head> que nous venons d'aborder ont un contenu 
invisible dans le navigateur. L' element <body> au contraire est le conteneur de 1' ensemble 
des elements textuels et graphiques d'une page web. En revanche, et contrairement a 
beaucoup de vieilles et mauvaises habitudes de codage non conformes, le corps d'un 
document XHTML delimite par les balises <body> et </body> ne peut pas contenir 
n'importe quel autre element XHTML existant, pas plus qu'il ne peut contenir quoi que 
ce soit qui ne soit delimite par un autre element. En particulier, il est interdit d'y inclure 
directement du texte brut, comme on le voit encore trop souvent. Le tableau 2-2 donne la 
liste exhaustive de tous les elements qui peuvent etre inclus directement dans l'element 
<body>. Tout autre element y est interdit et le respect de cette liste est une convention pri- 
maire de validation d'un document XHTML. C'est done le premier controle auquel vous 
devez proceder. 

Tableau 2-2. L'ensemble des elements enfants de l'element <body> 

address, blockquote, del, div, dl, fieldset, form, hi, h2, h3, h4, h5, h6, hr, ins, ol, noscript, p, pre, script, 
table, ul 



Les elements ne figurant pas dans cette liste doivent d'abord etre inclus dans des ele- 
ments de cette liste (c'est le cas par exemple de l'element <img />). Chacun de ces 
elements de premier niveau dans la hierarchie des elements au sens XML du terme peut 
a son tour contenir un certain nombre d'autres elements, et ainsi de suite. A chacun de 
ces elements correspond done un certain nombre d'elements enfants autorises qu'il nous 
faut respecter. Au fur et a mesure que nous aborderons les differents elements XHTML, 
nous donnerons systematiquement le contenu qu'il est possible de leur donner. Vous trou- 
verez en annexe A la liste de tous les elements de la DTD XHTML 1.1, leurs elements 
enfants et parents autorises et leurs attributs. A titre indicatif, le code de l'exemple 2-5 
cree un document XHTML de base contenant tous les elements admis dans le corps d'un 
document par ordre alphabetique. 

Exemple 2-5. Les elements admis dans le corps d'une page XHTML 1.1 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtinlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les elements du corps de la page</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 

<meta name="Author" content="Jean ENGELS" /> 

<meta name="Keywords" content="XHTML, CSS , Web" /> 

<meta name="Description" content="Le site de XHTML 1.1" /> 

<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 

<style type="text/css" t1tle=""> 
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</style> 
</head> 
<body> 

<address>Contact : xhtml@f unhtml . com</address> 
<bl ockquote> 

<h4>titre h4</h4> 
</bl ockquote> 

<del>L'ancienne version HTML 3.2</del> 

<div>bloc div</div> 

<dl> 

<dt>Liste de définition</dt> 
</dl> 

<fieldset> 

<1 egend>l egende</l egend>texte<button>bouton</button> 
</fieldset> 

<form action="script.php"> 

<f ieldsetXl egend>commentai res</legend><br /> 
<textarea cols="30" rows="5">texte</textarea> 

</fieldset> 
</form> 

<hl>titre de niveau K/hl> 
<h2>titre de niveau 2</h2> 
<h3>titre de niveau 3</h3> 
<h4>titre de niveau 4</h4> 
<h5>titre de niveau 5</h5> 
<h6>titre de niveau 6</h6> 
<ins>nouvel 1 e version html 4.01</ins> 
<ol> 

<li>Item K/li> 

<li>Item 2</li> 
</ol> 

<p>paragraphe 1: de 1 'action de la pluie sur la vie des grenouilles. . . .</p> 
<pre> 
code javascript: 
document. writeC'boucle") ; 
for(i=0;i<5;i++) 
{ 

document. write( i); 
} 

</pre> 

<noscript><p>votre navigateur ne reconnait pas javascript</p></noscript> 
<script type="text/javascript"> 
<! — 

document. writeC'boucle javascript <br />"); 

for(i=0;i<5;i++){ 

document. write( i,' ')} 
// --> 
</script> 
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<table border="l"> 
<tbody> 

<tr><td>Cellule de tabl eau</td></tr> 
</tbody> 
</table> 
<ul> 

<1 i >Item K/li> 
<li>Item 2</li> 
</ul> 
</body> 
</html> 



Les figures 2-2 et 2-3 presenters les affichages obtenus dans un navigateur apres 1' execution 
du code de l'exemple 2-5. 
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L'ensemble des elements enfants de <body> (premiere partie) 
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Figure 2-3 

L'ensemble des elements enfants de <body> (deuxieme partie) 



Dans tous les chapitres de la premiere partie de cet ouvrage, nous allons aborder l'ensem- 
ble des elements incorporates dans l'element <body>, et nous y procederons successivement, 
en fonction de leur role, pour creer toutes les fonctionnalites utiles dans un site. 



Exercices 

Exercice 1 : La declaration XML est-elle obligatoire ? Oil doit-elle etre placee ? Quelles 
informations contient-elle ? Dans quel cas pose-t-elle des problemes ? 

Exercice 2 : Que faut-il faire pour que le code soit valide si la declaration XML est 
omise ? 

Exercice 3 : A quel emplacement est definie la DTD utilisee dans le document ? Quelles 
sont les differentes DTD utilisees dans un document XHTML 1 ? 

Exercice 4 : Oil est declare le nom de l'element racine du document ? Quel est son role 
et son nom ? 

Exercice 5 : Quels sont les elements enfants de l'element <html> ? 
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Exercice 6 : A quoi sert l'element <head> ? Quels sont ses elements enfants ? Peuvent-ils 
etre employes plusieurs fois dans le meme document ? 

Exercice 7 : Quel element est obligatoire dans l'element <head> ? A quoi sert-il ? 

Exercice 8 : Ecrivez le code necessaire a la liaison d'une feuille de style avec un document. 

Exercice 9 : Ecrivez le code necessaire a la liaison d'un document exteme contenant des 
scripts JavaScript avec un document. 

Exercice 10 : Comment declarer les mots-cles associes au site ? Quelle est l'utilite de 
cette declaration ? Ecrivez en un exemple. 

Exercice 11 : Quel est le role de l'element <base />? Ecrivez-en un exemple. 
Exercice 12 : Peut-on ecrire le code suivant dans une page ? 

<body> 

Bienvenue dans notre site 
<hl>Le site du XHTML et de CSS2</hl> 
</body> 

Exercice 13 : Peut-on inclure les elements <img />, <form> et <1 i > dans l'element <body> ? 

Exercice 14 : Ecrivez un script qui affiche un message d'alerte quand l'utilisateur arrive 
sur le site. 

Exercice 15 : Ecrivez le code CSS suivant a l'endroit adequat : 

body {background-color:white;color:green;font-size :20px} 

Incluez ensuite un texte dans la page et testez le resultat. Vous devez obtenir un fond 
rouge, un texte bleu avec des caracteres de 20 pixels. 
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Creer du texte et des listes 



Creer une page web, c'est d'abord y incorporer du texte, et ce depuis les origines du Web 
qui ne contenait rien d' autre. Nous avons a notre disposition nombre d'elements 
XHTML grace auxquels on peut incorporer un contenu textuel dans une page. La diver- 
site des elements qui datent des versions HTML permet une structuration du texte qui 
pourrait etre realisee avec beaucoup moins d'elements et l'utilisation conjointe de styles 
CSS. Cette structuration vise a organiser les differentes parties du texte et a attirer 1' atten- 
tion des visiteurs sur les points importants. II est done necessaire que le contenu textuel 
soit structure en titres de differents niveaux, en grandes divisions puis en paragraphes. 
Les listes constituent egalement un moyen de structurer 1' information dans certains cas 
particuliers. 

Les titres 

Dans une page web, c'est en priori te les titres qui identifient les grandes sections de texte, 
comme nous le faisons dans ce livre. Les titres sont contenus dans les elements <hl> ... 
</hl>, pour les titres de premier niveau, a <h6> ... </h6>, pour les titres de plus bas niveau. 
Entre ces extremes nous pouvons utiliser les titres <h2>, <h3>, <h4> et <h5>, et nous note- 
rons <hN> pour designer l'ensemble de ces elements. Si aucun style personnalise ne leur 
est donne, les navigateurs affichent les titres dans des polices de tailles degressives pour 
les elements <hl> (le plus grand) a <h6> (le plus petit). Les elements de titre faisant partie 
des elements de bloc, ils sont automatiquement suivis d'un saut de ligne, apres la balise 
de fin </hl> par exemple. On peut cependant adapter cette particularite en definissant un 
style personnalise pour ces elements. En tant que bloc, un element <hN> peut contenir 
bien sur du texte, ce qui en constitue l'utilisation la plus frequente, mais il est utile de 
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savoir qu'il peut aussi inclure tous les elements « en ligne ». II peut par ailleurs etre inclut 
dans les blocs et les cellules des tableaux. Les tableaux 3-1 et 3-2 donnent la liste exhaus- 
tive des elements enfants et parents des elements de titre <hN>. 

Tableau 3-1. Liste des elements enfants de <h1> ... <h6> 

I 1 

Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, label, map, 
object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var 



Tableau 3-2. Liste des elements parents de <h1> ... <h6> 

blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th 

Les elements <hl> ... <h6> possedent l'ensemble des elements communs vus au chapitre 
2. Nous utilisons le plus souvent id, class, title, et par exemple les gestionnaires d'eve- 
nements onmouseover et onmouseout pour changer leur style, par exemple la couleur du titre 
quand le curseur le survole et la retablir quand il quitte la zone du titre. Sans utiliser 
aucun style, les titres de niveaux 1 a 6 sont done affiches avec des polices de tailles 
decroissantes comme le montre la figure 3.1, obtenue par l'affichage de la page de 
l'exemple 3-1 qui cree six titres de niveaux decroissants (repere O a ©) et utilise les 
deux gestionnaires d'evenements onmouseover pour ecrire le titre de niveau 1 en rouge et 
onmouseout pour le remettre en noir, sa couleur par defaut (repere Q)- 

Exemple 3-1. Les differents niveaux de titre et leur style par defaut 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les differents niveaux de titre</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<hl onmouseover="this. style. color='red' ;" 

onmouseout="thi s . style. color='black'">Titre de niveau K/hl>0 
<h2>Titre de niveau 2</h2>© 
<h3>Titre de niveau 3</h3>© 
<h4>Titre de niveau 4</h4>© 
<h5>Titre de niveau 5</h5>© 
<h6>Titre de niveau 6</h6>© 
</body> 
</html> 
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Signalons encore une fois qu'il ne faut pas choisir un niveau de titre en fonction de sa 
taille physique par defaut telle qu'elle est representee a la figure 3-1, mais en fonction de 
la semantique sous-jacente qui lui est attachee. Si une page ne comporte que des titres 
d'un seul niveau, il est conseille de n'utiliser que des titres <hl> sans tenir compte de la 
taille par defaut et non pas des titres <h2> par exemple, au motif que la taille convient 
mieux. La taille a laquelle on veut afficher reellement ces titres dans la page sera determi- 
nee en ecrivant un style CSS. Dans le code suivant, nous organisons le contenu d'une 
page en utilisant quatre niveaux de titres selon une structure similaire a celle d'un livre. 
Le niveau <hl> est celui des parties du livre (reperes Q et ©), le niveau <h2> est celui des 
chapitres (reperes Q et 0), le niveau <h3> est celui des differentes sections (reperes ©, 
0, © et ©) et enfin le niveau <h4> est celui des titres des differents paragraphes (reperes ©, 
0> ©> ©> ©> © et ©). Les niveaux suivants peuvent par exemple etre utilises pour 
les titres des exemples et des figures. Chacun peut ensuite etre dote d'un style CSS 
approprie aux gouts du concepteur de la page mais la structure reste identique quelle que 
soit la presentation adoptee. 

<body> 

<hl>PARTIE I : XHTML</hl>© 
<h2>Chapitre 1 : Introduction</h2>© 
<h3>Section K/h3>© 
<h4>Paragraphe K/h4>© 
<h4>Paragraphe 2</h4>© 
<h3>Section 2</h3>0 
<h4>Paragraphe K/h4>© 
<h4>Paragraphe 2</h4>0 
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<h2>Chapitre 2 : Structure d'un document</h2>@ 
<h3>Section K/h3>© 
<h4>Paragraphe K/h4>© 
<h4>Paragraphe 2</h4>© 
<h3>Section 2</h3>© 
<h4>Paragraphe K/h4>© 
<h4>Paragraphe 2</h4>© 
<hl>PARTIE II : CSS 2</hl>© 
<!-Suite de la structure --> 
</body> 

La figure 3-2 donne une representation de cette structure avec les styles par defaut d'un 
navigateur Mozilla. 
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Les divisions de la page 

Le corps d'un document, contenu dans l'element <body>, peut etre divise en differentes 
parties qui vont constituer les differents blocs de la page. Ces divisions permettent de 
bien structurer 1' information contenue dans une page. 
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Les paragraphes : /'element <p> 

Comme dans un traitement de texte, le contenu d'une page peut etre divise en differents 
paragraphes. Chaque paragraphe sera par defaut precede et suivi d'un saut de ligne pour 
marquer la separation avec le contenu precedent et suivant. Chaque paragraphe doit etre 
contenu dans l'element <p>, et done delimite par les balises <p> et </p>. Chaque paragra- 
phe peut bien sfir contenir du texte mais egalement tous les elements en ligne comme des 
images, des objets multimedia ou des composants de formulaire si l'element <p> est 
inclut lui-meme dans un formulaire (voir le chapitre 7, Creer des formulaire s). Les 
tableaux 3-3 et 3-4 donnent respectivement la liste des elements enfants et parents d'un 
paragraphe <p>. 

Tableau 3-3. Liste des elements enfants de l'element <p> 



Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, label, map, 
object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var 

Tableau 3-4. Liste des elements parents de l'element <p> 

blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th 



L'element <p> possede l'ensemble des attributs communs et aucun autre attribut particu- 
lier. Lexemple 3-2 montre une utilisation de titres et de paragraphes pour structurer une 
page. La figure 3-3 montre le resultat obtenu pour cette page. 

Figure 3-2. Structuration du texte en paragraphes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les paragraphes</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 

</head> 

<body> 

<hl>Chapitre K/hl> 

<h2>La creation du monde</h2> 

<p>In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux et vidit Deus lucem 

</p> 
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<p>Et vocavit Deus ari dam terrain congregationesque aquarum appellavit maria 
et vidit Deus quod esset bonum et ait germinet terra herbam virentem et 
facientem semen et lignum pomiferum faciens fructum iuxta 

</p> 

<h2>Le huitieme jour</h2> 

<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
«» et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
</p> 
</body> 
</html> 
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Chapitre 1 

La creation du monde 

In principio creavit Deus caelum et terrain terra, autem erat inanis et vacua, et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dlxitque 
Deus fiat hrt et facia est lux ei T ddii Deus hicem quod esset bona et dhisit hjeem ac tenebras appellavitque tucetu diem ei tenebras noctem. factunique est 
vespere et mane dies unus dixit quoque Deus fiat fifmamentumin medio aquarum et dhidat aquas ab aquis et fecit Deus firinamentum dhisitque aquas 
quae erant sub frrmameiiTci ab hi quae erant ^uper fmnamennim et factum est ita voca\itque Dens frrmaiinennim caelum et factum est verier e et mane 
dies secundus dixit V*fO Deus cougregenuir aquae quae sub eaelo sunt in locum unutn et appareat arida raetunique est ita 

Et vocavit Deus aridam terram congregationesque aquarum appellavit maria et vidit Deus quod esset bonum et ait germinet terra herbam vtrentem et 
facientem semen et lignum p Ofltifef tffll faciens tructiim iuxta Remit suum cuius semen in semetipso sir super terram et factum est ita et protulit Terra herbain 
virentem et adferentem semen iuxta genus suum lignumque faciens rructuin et liabens unumquodque semeurem secundum speciem suam et vidit Deus 
quod esset bonum factumque est vespers et mane dies tertius dixit autem Deus riant Juininaria in firmament o caeli ut dridant diem ac noctem et sint in 
skjia ct tcnipora ct dies ct aimos ut luce ant in firmamcnto cacli ct irJuinincut terram ct factum est ita fecit que Deus duo magna hmiinaria hmiinarc maius ut 
praeesset diei et JuuiLiore minus ut praeesset uocu et Stellas et posuit eas in firmamcnto caeli ut hicerent super terram et praeesseut diei ac uocti et 
divider enl lucem ac leuebia^ eL ^idiL 



Le huitieme jour 

In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dbdtque 
DtUtS tint tux et facta est hix et vidit I Hens lucem qimd esset bona er dhisit fucem ac tenebras appellavitque hicem diein ef tenebras noctem factumque est 
vesper e et mane dies utius dixit quoque Deus fiat finnamentum in medio aquarum et dhidat aquas ab aquis et fecit Deus firmameuttun dhisitque aquas 
quae erant sub firmameiito ab his quae erant super finnaineiimm et factum est ita vocavitque Deu:- firmameuruin caelum et factum est vespere et mane 
dies sccundus dixit vero Deus cougregentur aquae quae sub caclo sunt in locum uiium ct appareat arida factumque est itaXHTML 
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Figure 3-3 

Les paragraphes 



Notons que si l'utilisateur redimensionne la fenetre du navigateur, la largeur des paragra- 
phes s'adapte a cette nouvelle taille. Le texte reste totalement visible mais sur davantage 
de lignes, sans avoir a utiliser la barre de defilement horizontale. 
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Les divisions de la page : /'element <div> 

Comme l'element <p>, l'element <div> peut etre directement inclut dans le corps du 
document <body>. II cree une division de la page. Ce type de division permet de grouper 
dans un seul bloc un ensemble compose soit de texte soit d' elements inclus, auxquels on 
pourra appliquer globalement des styles particuliers. A la difference des paragraphes, une 
division creee avec <div> permet d'inclure une tres grande variete d'elements XHTML, 
comme du texte brut, les elements en ligne et la totalite des elements de niveaux bloc 
comme 1'autorise <body>, mais egalement les titres, les listes et les formulaires, ce qui est 
interdit dans un paragraphe. Les tableaux 3-5 et 3-6 donnent respectivement la liste de 
tous les elements enfants et parents de l'element <div>. C'est done un element tres riche 
qui se prete bien a la creation de la structure d'une page en grands blocs distincts auxquels 
il est possible d' appliquer par la suite des styles propres et des positions precises (voir le 
chapitre 13, Creer une mise en page : le dimensionnement et le positionnemenf). 

Tableau 3-5. Liste des elements enfants de l'element <div> 

Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, dl, em, fieldset, 
form, hi , h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, object, ol, p, pre, q, table, samp, script, 
select, small, span, strong, sub, sup, textarea, tt, ul, var 

Tableau 3-6. Liste des elements parents de l'element <div> 

I 1 

blockquote, body, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th 



L'element <div> admet 1' ensemble des attributs communs dont id, class, title, dir, 
xml :lang, qui sont les plus utilises. Une des applications les plus courantes des divisions 
<di v> consiste a creer des caiques auxquels on applique des styles de positionnement per- 
mettant de remplacer avantageusement les cadres. II nous sera, par exemple, possible de 
diviser la page web en zones bien definies ayant chacune un role precis. Comme nous le 
verrons dans la deuxieme partie de cet ouvrage, 1' application de styles a des divisions 
permettra de creer facilement un en-tete, une zone de menu, une zone de contenu et un 
pied de page distincts qu'il sera possible de repeter dans chaque page (voir le chapitre 13). 
II nous sera egalement possible a l'aide de scripts simples de creer des effets graphiques 
sur des divisions en les faisant apparaitre ou disparaitre en fonction des actions du visi- 
teur. Notons aussi que, contrairement aux paragraphes <p>, la fin d'une division 
n'entraine pas un saut de ligne par defaut, mais seulement un retour a la ligne. Les conte- 
nus des differentes divisions peuvent done se succeder sans rupture. L exemple 3-3 
reprend le meme contenu que l'exemple 3-2 en remplacant les elements <p> par des divi- 
sions <div> (reperes O- © et ©)• On notera la difference d'affichage obtenue entre la 
figure 3-3 (paragraphes <p>) et la figure 3-4 (blocs <div>). Nous ne retrouvons plus entre 
deux blocs <di v> le saut de ligne qui existe entre deux paragraphes. Dans cet exemple, la 
realisation d'une separation du texte entre les deux premiers blocs <di v> ne se justifie que 
si Ton veut leur appliquer des styles differents par la suite. 
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Chapitre 1 



La creation du monde 



Iti prtncipto crea^-it Deus caelum et terram terra autem erat inauis ei vacua et tenebrae super faciein abvssi et spiritus Dei 
ferebatur super aquas dixitque Deus fiat lux et facta est lux etvidit Deus lueem quod asset bona et dhisit hicem ac tenebras 
appella T atque lucem diem et tenebras noctem factumque est vespere et mane dies unus dixit qQoque Deus fiat firmamentum in 
medio aquarum et dhidat aquas ab aquis et fecit Deus firmamentum dhisitque aquas quae eratit sub firmamento ab liis quae 
erant sttper firmamentum ei factum est ita vocavitque Deus nruiamentum caelum et factum est vespere et mane dies secundus 
dixit vem Deus rotictregenhir aquae quae sub raeln sunt in Incum utnim et appareaf arida fartnmqne est ita 
Et vocavit Deus aridam terram congregationesque aquarum appellant maria etvidit Deus quod essetbonum et ait germttiet 
terra herbam ^irentem et facientem semeti et lignum pomiferuni faciens fructum hixta genus suum ctiius semen ia semet ipso sit 
super terram et factum est ita et protulit terra herbam ^.irentem et adferentem semen iuxta genus suum Hgnumque faciens tfuccum 
et habens nnuni quod que sementem secutidutn sperieni snatn er vidtt Deus qnnd essef botnmi farmmqiie est vespere ettnaue 
dies terfius dixit autemDeus fiant luminaria in firmametito caeliut dhidatit diem ac noctem et sint bi sigtia et tempera et dies et 
annos ut bceant in firmametito caeli et infumiiient terram et factum est ita fecit que Deus duo magna luminaria tuniinare niaius ut 
pi ajeessel diei eL luminal e milium Lit pi uee^et nucti et itella= et pu>uit ea= in fiimameutu caeli ut lu^ci eut supei leu am et 
praeessent diei ac nocti et dhiderent lucem ac tenebras et \idit 



bi piincipiu cieuul Deu^ caelum et leiiam teiia outein eial inauib el ^ acua et teuebme supei ikciem abvssi et ^piiitub Dei 
ferebatur super CSS aquas dixitque Deus fiat lux et facta est hix et ^idit Deus lucem quod esset bona et dhisit lucem ac 
tenebras appellant que lucem diem et tenebras noctem factumque est vespere et mane dies unus dixit quo que Deus fiat 
ftrmamentum in medio aquarum et dhidat aquas ab aquis et fecit Deus firmatnentum dhisitque aquas quae erant sub firmamento 
ab liii quae eianl ^upei fii momentum et factum ebt ita \ oca\itque Deu> Jjimameiittuii caelum et factum est ^espeie et mane dies 
secundus dixit vero Deus congregentur aquae quae sub caelo sunt in locum ununi et appareat arida factumque est ita XHTML 



<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les divisions div</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 
<hl>Chapitre K/hl> 



Le huitieme jour 



Figure 3-4 

Les divisions en blocs <div> 



Exemple 3-3. Les divisions en blocs <div> 
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<h2>La creation du monde</h2> 

<div>In principio creavit Deus caelum et terrain terra autem erat inanis 
et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super 
aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem ... 

</div>© 

<div>Et vocavit Deus aridam terrain congregationesque aquarum appellavit maria 

et vidit Deus quod esset bonum et ait germinet terra herbam virentem et 
*» facientem semen et lignum pomiferum faciens fructum iuxta ... 
</div>© 

<h2>Le huitieme jour</h2> 

<div>In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas ... 
</div>© 
</body> 
</html> 



Les divisions de bloc locales 

Le corps du document peut contenir d'autres elements de niveau bloc qui etaient destines 
en HTML a obtenir un rendu particulier, essentiellement pour des parties de texte. 
Compte tenu de l'utilisation generalisee des styles, ces elements perdent aujourd'hui de 
l'importance car nous pouvons obtenir le meme resultat en appliquant un style specialise 
a un element <di v> par exemple. lis resteront cependant utiles a ceux qui veulent obtenir 
la presentation par defaut de chacun d'entre eux dans les navigateurs courants. 

Les blocs de citations : I'element <blockquote> 

L' element <bl ockquote> sert a creer une division de petite taille dans le corps d'une page. 
A l'origine, il etait destine a contenir des blocs de citations, comme un petit poeme ou 
une note. Son contenu est par defaut mis en evidence au moyen d'un affichage en retrait 
par rapport aux bords gauche et droit de la page. Chaque element est suivi d'un saut de 
ligne, tout comme pour les paragraphes. Notons bien qu'aucun contenu textuel ne peut y 
etre inclut directement, pas plus que les images d'ailleurs. II faudra au prealable inclure 
dans cet element par exemple un paragraphe <p>, puis le texte et les images. Les tableaux 
3-7 et 3-8 donnent respectivement la liste des elements enfants et parents de I'element 
<blockquote> qu'il faut respecter. 

Tableau 3-7. Elements enfants de I'element <blockquote> 

address, blockquote, del, div, dl, fieldset, form, hi, h2, h3, h4, h5, h6, hr, ins, noscript, ol, p, pre, script, 
table, ul 

I I 

Tableau 3-8. Elements parents de I'element <blockquote> 



blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th 
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L'exemple 3-4 reprend encore le contenu des exemples precedents, inclus cette fois dans 
des elements <blockquote>. Le premier (repere O) contient a la fois un titre de niveau 2 
(repere ©) et un bloc <div> (repere ©). Le deuxieme (repere 0) ne contient qu'un bloc 
<di v> (repere 0) et le dernier (repere 0) contient un titre (repere 0) et un paragraphe <p> 
(repere ©). La figure 3-5 montre le type de presentation que fournissent par defaut les 
navigateurs pour l'element <blockquote>. 

Exemple 3-4. Les blocs <blockquote> 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les blocs blockquote</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 

< 1 ink rel ="shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
</head> 
<body> 

<hl>Chapitre K/hl> 

<bl ockquote>0 
<h2>La creation du monde</h2>0 

<div>In principio creavit Deus caelum et terram terra autem erat inanis 
et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super 
aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem ...</div>0 

</bl ockquote> 

<bl ockquote>0 

<div>Et vocavit Deus aridam terram congregationesque aquarum appellavit maria 
et vidit Deus quod esset bonum et ait germinet terra herbam virentem et 
facientem semen et lignum pomiferum faciens fructum iuxta ...</div>0 
</bl ockquote> 
<bl ockquote>0 
<h2>Le huitieme jour</h2>© 

<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super CSS aquas 
dixitque Deus fiat lux et facta est XHTML ... </p>© 
</bl ockquote> 
</body> 
</html> 



Les differences avec les exemples precedents ne se situent qu'au niveau de la presenta- 
tion et celle-ci aurait pu etre obtenue en appliquant des styles aux elements <p> ou <div> 
employes precedemment. Cela confirme bien qu'il faut s'attacher dans un premier temps 
a la structure et non a 1' aspect. 
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Figure 3-5 
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Chapitre 1 

La creation du moiide 



hi priiicipio creaTft Deu5 caelum et terrain terra autem crat iiiaais et vacua ct teiiebrae 
oilier tariem abyssi et spirthis Dei ferehamr super aquas rlixitqne Dens fiat hrv et farta 
est lux eniditDeus lueetn ... 

Et vocarrit Deus aridam terrain con^regationesque aquarum appellavit niaria ct ^idit 
Deus quod esset botmtn et ait serrairiet terra herbarn -irentem etfacientem semen et 
li=jLLU[i uc-uiilctuiii laden:: nu'jLuin ia.ua ... 



Le huirieme jour 



In priiicipio ere a** it Deu? caelum ct terrain terra autetn crat iiiaui? ct vacua ct tencbrac 
super faciem abyssi et spititus Dei ferebatur super CSS aquas dixitque Deus fiat lux et 
facta est XI ITML ... 



Le texte preformate : I'element <pre> 

Usuellement, cet element sert a afneher le texte qu'il contient en preservant sa presenta- 
tion et les differents espaces et indentations qui se trouvent dans le code XHTML, alors 
que par defaut les autres elements ne conservent pas cette presentation. Le texte qu'il 
contient est affiche par defaut dans une police a espacement fixe, comme dans un editeur 
de code. Pour ces raisons, I'element <pre> est traditionnellement utilise en preservant 
tous ses espaces. II possede l'ensemble des attributs communs auxquels s'ajoute l'attri- 
but xml : space qui prend la valeur unique preserve et dont le but est de definir explicitement 
la conservation de tous les espaces contenus dans I'element. En tant que bloc, I'ele- 
ment <pre> peut contenir des elements en ligne. Les tableaux 3-9 et 3-10 donnent respec- 
tivement la liste des elements enfants et parents de ce bloc. On notera par exemple qu'il 
ne peut pas contenir d' images. 



Tableau 3-9. Les elements enfants de I'element <pre> 



Texte, a, abbr, acronym, b, bdo, br, button, cite, code, del, dfn, em, i, input, ins, kbd, label, map, q, samp, 
script, select, span, strong, sub, sup, textarea, tt, var 

Tableau 3-10. Les elements parents de I'element <pre> 

blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th 
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L'exemple 3-5 illustre l'utilisation de cet element pour l'affichage du code d'un script 
JavaScript et du code d'une page XHTML en leur conservant leurs indentations. 

Exemple 3-5. Utilisations de I'element <pre> 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 
<head> 

<title> L'element pre </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-l" /> 
</head> 
<body> 

<h3>Exemple de script JavaScript</h3> 
<hr /> 

<pre xml :space="preserve">© 
&1 1 ; scri pt type="text/javascript" >© 
<!-- 

function couleur(col ) 

{ 

document .get El ementByldt "corps" ) . styl e. color=col ; 

} 

--> 
</script> 
</pre> 
<hr /> 
<pre>© 

Le contenu d'une page X H T M L 
&1 1 ; html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml " > 
<head> 

<title>Les blocs blockquote </title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" 
/> 
</head> 
<body> 

<hl> La page XHTML </hl> 
</body> 
</html> 
</pre> 
</body> 
</html> 



La figure 3-6 montre le resultat obtenu. 
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Exemple de script JavaScript 


< script tv"Fe = " text/javascript " > 






function coule-jr (col) 






do c urr.e: r. ~l . csTZ_e;rr.e:r. ^B'.'Ici i " : . =-T"."_e: . ; ; c _ ; 






— > 
</ script> 






I e c c r. t e r. u d ' u r. e c e. g e X H I M 
<btir,l xr:.l : _a.r.c = " f r n xr:._r. 3 = "btt-p : //www . w3 . orgj/19 9 9/xrjtir 
<head> 

<"iwle>Ie; b l::f bl 2 :: bqu </-i-le> 

<rr.et£ b~ ~;c-equiv= rr Conter.it-type FI ccnteEt= ri text/html 
</bead> 
<t>ody> 

<bl> la F s £ e XHTML. </bl> 
</hody> 
</htral> 


; cbar3et= 


=130-8359-; 
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Les autres elements de niveau bloc 

Le langage XHTML definit plusieurs elements mineurs de niveau bloc dont l'utilisation 
se revele accessoire puisqu'ils peuvent etre remplaces par exemple par un element <p> ou 
<di v> auquel est associe un style particulier. II s'agit des elements suivants : 

• L' element <address> dont le contenu est identique a l'element <p> (elements en ligne et 
texte brut). Son principal role est d'africher l'adresse de contact avec le responsable du 
site. Son contenu est affiche par defaut en italique et en petits caracteres. II est tradi- 
tionnellement insere en bas de page (voir la figure 3-7). II possede l'ensemble des 
attributs communs. 

• Les elements <del> et <ins>, generalement associes l'un a l'autre, sont destines a 
contenir respectivement des informations actuellement supprimees, pour cause 
d' obsolescence par exemple, pour <del>, et la version actualisee de ces informa- 
tions pour <ins>. Ces deux elements possedent l'ensemble des attributs communs 
ainsi que l'attribut cite qui contient l'URL d'un document contenant les informa- 
tions detaillees sur le contenu supprime. L'attribut datetime contient la date de la 
suppression ou de la validite des contenus. Cette date doit etre au format AAAA-MM-JJ 
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T hh-mm-ss Z. Les navigateurs actuels n'exploitent pas directement ces attributs. 
Pour y acceder, il faut avoir recours soit a un script, soit a un style CSS qui permet 
d'en afficher le contenu (voir l'utilisation de la propriete content). 

• L' element <form> permet de creer un formulaire. II contient des elements de niveau 
bloc qui renferment a leur tour les differents composants du formulaire. Compte tenu 
de 1'importance de cet element dans la creation des pages web dynamiques, nous lui 
consacrons un chapitre particulier (voir le chapitre 7, Creer des formulaires). 

• L' element <f i el dset> fait egalement partie du bloc. Son role habituel est egalement 
d'etre inclut dans l'element <form> pour creer des groupes de composants d'un for- 
mulaire (voir le chapitre 7). Par defaut, ces groupes sont delimites par un lisere fin. 
S'il contient l'element <legend>, le contenu de ce dernier est affiche dans le lisere. 
L'element <fieldset> pouvant contenir tous les autres elements de bloc, les 
elements en ligne, les titres et les listes, il est done envisageable de l'utiliser pour 
creer des divisions particulieres dans la page, meme en dehors du contexte des for- 
mulaires, comme <div>, en profitant de son style par defaut. II possede la totalite 
des attributs communs. 

L'exemple 3-6 permet de tester les elements <del> et <ins> pour lesquels nous gerons 
l'evenement onclick qui permet d' afficher une boite d'alerte affichant quant a elle la 
valeur de l'attribut cite (reperes © et ©). Avec l'element <fieldset> (repere ©), on peut 
afficher une zone de note encadree contenant un titre et un paragraphe (reperes ©. 
et 0). Enfin, l'element <address> contenant un lien permet d'entrer en contact avec le 
responsable du site (repere ©). 

Exemple 3-6. Les elements de bloc annexes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<title> Divers elements de bloc </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-l" /> 
</head> 
<body> 

<hl>Les elements annexes de blocs</hl> 

<p>La version ancienne 

<del cite="http://www. w3.org" datetime="1998-12-31" 

onclick="alert(this.cite)">HTML</del>0 
a ete remplacee par les specifications 

<ins cite="http://www. w3.org/XHTML" onclick="alert(this.cite)" > 
XHTML l.K/ins>© 
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</p> 

<fieldset>@ 
<legend>Note : </legend>© 
<h2>La creation de XHTML</h2>© 

<p>In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras appel 1 avitque lucem diem et tenebras noctem 
</p>© 
</fieldset><br /> 

<address>Contact avec 1'auteur : <a id="auteur" 

href="mailto:xhtml@funhtml .com">xhtml@funhtml .com</a> Q 
</address> 
</body> 
</html> 

La figure 3-7 offre un rendu visuel de ces elements. 
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La creation de XHTML 

In principio creavit Deus caelum et terrain terra autem erat inanis et vacua et tenebrae super faciem abyssi et 
spiritus Dei ferebatur super aqua; dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et 
divisit lucem ac tenebras appellavitque lucem diem et tenebras noctem facmmque est vespere et mane dies unus 
dmt quoque Deus fiat firmamentum in medio aquarum et dividat aquas ab aquis et fecit Deus firmamentum 
di'.isitque aquas quae erant sub firmamento ab lis quae erant super firmamentum et factum est ita vocavitque Deus 
firmamentum caelum et factum est vespere et mane dies secundus di'dt •■ ero Deus congregentur aquae quae sub 
caelo 
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Les elements des divisions semantiques en ligne 

Le langage HTML offrait un nombre relativement important d' elements en ligne qui 
permettaient de delimiter des contenus en ligne. Ces derniers etaient souvent limites a 
quelques mots arm de les particulariser et de les mettre en evidence, le plus frequem- 
ment au moyen d'un style predefini. XHTML a conserve la plupart de ces elements 
mais nombre d'entre eux perdent de leur interet pratique car, en associant des styles 
CSS differents a un seul type d'element, <span> par exemple, nous constaterons par la 
suite que nous pouvons obtenir les memes resultats visuels. On peut envisager que cer- 
tains d'entre eux soient appeles a disparaitre. lis gardent cependant un role dans la 
structuration du contenu d'une page. En tant qu'elements en ligne, ils doivent etre 
inclus dans un element de type bloc, et jamais directement dans le corps de la page. 
Les paragraphes suivants presentent l'ensemble de ces elements en ligne et leur role 
respectif. 

Tous ces elements ont en commun les memes elements enfants dont la liste figure dans le 
tableau 3-11. 

Tableau 3-11. Les elements enfants des elements semantiques en ligne 

Texte , a, abbr, acronym, b, big, bdo, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, label, map, 
object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var 

Les abreviations 

L' element <abbr> contient une abreviation, par exemple « kg » pour kilogramme ou 
« cine » pour cinematographe. Cet element possede la totalite des attributs communs, les 
plus adaptes etant i d, cl ass et ti tl e. II peut contenir tous les elements en ligne. Nous uti- 
lisons generalement l'attribut commun title pour afficher la signification exacte de 
l'abreviation quand l'utilisateur place le curseur sur son contenu signale dans les naviga- 
teurs par un soulignement en pointilles. Les attributs gestionnaires d'evenements oncl i ck 
et onmouseover peuvent permettre d'afficher une boite d'alerte contenant la definition 
detaillee. 

Le code suivant : 

<abbr title="kilogramme" onmouseover="al ert( 'Unite de masse: kilogramme' )">kg</abbr> 

definit l'abreviation d'une unite physique. Sa signification est donnee dans l'attribut 
title, et elle s'affiche de maniere detaillee dans une boite d'alerte quand le curseur 
survole le texte en utilisant l'attribut gestionnaire d'evenements onmousever (voir 
l'exemple 3-7 (reperes © et Q) et la figure 3-8). Notez que cet element est ignore par 
Internet Explorer 6 qui affiche son contenu comme du texte ordinaire et ne reconnait 
pas l'attribut title pour afficher la signification, et encore moins les gestionnaires 
d'evenements. 
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Les acronymes 

L' element <acronym> est le conteneur d'un acronyme, « XHTML », « PHP » ou 
« UNICEF » par exemple. Comme <abbr>, il possede la totalite des attributs communs et 
est encore affiche par defaut avec un soulignement en pointilles. C'est encore l'attribut 
title qui est utilise pour afficher une bulle contenant la definition in extenso de 1' acro- 
nyme. II peut aussi contenir l'ensemble des elements en ligne. 

Le code suivant : 

<P> 

Utilisez vite <acronym title="eXtensible HypertText Markup Language">XHTML 1.1 
</acronym> promis a un grand avenir! 

</p> 

donne la definition de l'acronyme « XHTML » dans l'attribut title. Voir l'exemple 3-7 
(repere 0) et la figure 3-8. 

Le sens de lecture du texte 

L'element <bdo> permet de modifier localement la definition du sens de lecture de son 
contenu qui a pu etre donne avec l'attribut dir de son element parent. En plus des 
attributs de base (id, class, title), il possede en effet l'attribut obligatoire dir qui 
prend les valeurs habituelles, 1 tr et rtl , pour indiquer que le sens de lecture se fait res- 
pectivement de gauche a droite, ou l'inverse. L'attribut xml :lang permet de preciser le 
code de la langue associe localement au contenu de l'element <bdo>. Cet element gene- 
ralement employe pour des textes courts peut cependant contenir tous les elements en 
ligne. 

Le code suivant : 

<p>Lire de gauche a droite 
<bdo dir="ltr" xml : 1 ang="f r">XHTML</bdo> ou de droite a gauche 
<bdo dir="rtl" xml : 1 ang="ar">XHTML</bdo> 

</p> 

permet d' afficher le mot « XHTML » successivement de gauche a droite et de droite a 
gauche, ce qui fournit les afhchages « XHTML » et « LMTHX » (voir l'exemple 3-7 
(repere 0) et la figure 3-8). 

Les citations 

Nous avons deja vu que l'element <bl ockquote> permet de contenir des citations et de les 
mettre en evidence. L'element <cite> a une destination similaire mais est utilise en ligne 
pour des citations courtes. II peut contenir directement du texte brut, tous les elements en 
ligne ainsi que <1 ns>, <del > et <scri pt>, et possede tous les attributs communs. 
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Le code suivant : 

<p>Comme le disait Boris Vian 

<cite ti tl e=" Vi an 1920-1959"> La verite n'est pas du cote du plus grand nombre 
car on ne veut pas qu'elle y soit. Le jour ou il sera a meme, par sa culture 
et ses connaissances , de choisir lui meme sa verite, il y a peu de chance 
pour qu'il se trompe.</cite> 

</p> 

affiche une citation dans une police en italique par defaut (voir l'exemple 3-7 (repere ©) 
et la figure 3-8). 



Linclusion du code source 

Nous avons deja utilise l'element <pre> pour inserer du texte preformate dans un bloc. 
L' equivalent en ligne est l'element <code> qui nous permet d'inclure dans une phrase le 
texte d'une instruction et de le mettre en evidence par rapport au contexte, car il est 
affiche par defaut dans une police a espacement fixe du type listing. 

Le code suivant : 

<p>Pour creer une botte d'alerte en JavaScript, nous ecrivons par exemple: 
<code>alert( 'Bonjour' )</code>. Dans ce cas 1 'execution du script s'arrete. 

■» <!-- 7 --> 

</p> 

affiche un paragraphe contenant du code JavaScript (voir l'exemple 3-7 (repere Q) et la 
figure 3-8). 

L'element <code> peut contenir par ailleurs tous les elements en ligne. II possede aussi 
tous les attributs communs. L'attribut title peut servir par exemple a afficher le nom du 
langage de programmation du code. 

Les definitions en ligne <dfn> 

L'element <df n> sert de conteneur a une definition de terme. Son emploi est rare en tant 
que tel. II contient du texte et les autres elements en ligne. Par defaut, son contenu est en 
italique. II possede tous les attributs communs. 

Le code suivant : 

<p>Ce batiment a la forme d'un pentagone 

<dfn>(polygone a cinq cotes)</dfn> et abrite des gens peu recommandabl es . 
</p> 

affiche le contenu de l'element en italique (voir l'exemple 3-7 (repere ©) et la figure 3-8). 
Les saisies du clavier 

Afin d'indiquer au visiteur les saisies a faire au clavier pour effectuer une action parti- 
culiere, il faut inclure ces saisies dans l'element <kbd>, dont l'emploi se revele d'ailleurs 
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aussi rare que le precedent. Par defaut, son contenu textuel est affiche comme celui de 
l'element <code> dans une police a espacement fixe. 

Nous ecrirons par exemple : 

<p>Si vous en avez assez, tapez : <kbd>Ctrl+Al t+Suppr</kbd> , et au revoir!</p> 

(voir 1' exemple 3-7 (repere Q) et la figure 3-8). 

Les citations courtes 

En supplement de l'element <cite>, nous pouvons utiliser l'element <q> pour des cita- 
tions courtes qui sont par defaut automatiquement incluses entre guillemets (en anglais, 
quotes d'ou le nom de l'element) dans la plupart des navigateurs. Toutefois, il n'est pas 
dans 1' esprit XHTML de compter sur une presentation automatique et il vaudra mieux 
creer un style personnalise pour obtenir cet effet. On se reportera a ce sujet aux pseudo- 
elements :before et :after au chapitre 9, et a la propriete content. L'attribut cite permet 
de donner l'URL d'une page susceptible de renseigner en detail sur la citation et son 
auteur. 

Nous pouvons ecrire, par exemple : 

<p>Comme Hamlet posons nous la question : <q 

cite="http://www.funhtml .com/hamlet. html " title="Hamlet : William Shakespeare" 
oncl ick="al ert( 'Vol r '+this.cite)">Etre ou ne pas être </q></p> 

L'attribut cite est ici defini, et le gestionnaire d'evenements onclick permet d'afhcher 
une boite d'alerte contenant l'adresse figurant dans cet attribut cite (voir 1' exemple 3-7 
(repere ©) et la figure 3-8). 

Les exemples en ligne : <samp> 

Pour mettre en evidence, en particulier dans un paragraphe de texte, un texte d'exemple 
pour illustrer le propos qui precede, il est possible d'utiliser l'element <samp> contenant le 
texte de l'exemple qui sera par defaut represents dans une police a espacement fixe du 
type Courier dans les navigateurs. Notons encore que l'utilisation de l'element <span> 
dote d'un style particulier remplirait la meme fonction. L'element <samp> peut contenir 
l'ensemble des elements en ligne et possede tous les attributs communs. 

Nous pouvons ecrire, par exemple : 

<p>Le type de 1 'equation du premier degre a deux inconnues est : <samp> ax+by = c 
</samp>. Elle n'a pas de solution unique</p> 

(voir l'exemple 3-7 (repere ©) et la figure 3-8). 
Les divisions en ligne <span> 

L equivalent en ligne de l'element de bloc <div> peut etre realise a l'aide de l'element 
<span>. C'est le plus employe des elements creant des divisions semantiques en ligne. II 
n'a pas de role predefini et peut remplacer nombre des elements precedents de cette 
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section a condition de lui attribuer un style particulier adapte a chaque besoin de presen- 
tation. II possede l'ensemble des attributs communs et c'est son attribut class qui sera 
systematiquement utilise pour lui attribuer un style. 

Le code suivant : 

<p>Le langage <span class="gras">XHTML</span> a pour complement indispensable 
| les styles <span cl ass="gras">CSS 2</spanX/p> 

cree deux divisions en ligne qui utilise un style CSS particulier, defini par ailleurs dans 
1' element <style> de l'en-tete (repere O)- Leurs contenus sont done affiches dans une 
police plus grande que celle du paragraphe parent et en gras (voir l'exemple 3-7 (repere ©) 
et la figure 3-8). 

C'est done un element passe-partout a usage tres divers que nous retrouverons a chaque 
fois qu'il s'agira d'appliquer un style de facon ponctuelle a un contenu reduit en ligne. 

Le conteneur des variables : <var> 

Le dernier conteneur en ligne, <var>, est destine a contenir des textes representant une 
variable. Son contenu est par defaut affiche dans une police cursive. II peut par ailleurs 
renfermer tous les elements en ligne et possede tous les attributs communs. Comme plu- 
sieurs des elements precedents, il n'a pas un interet fondamental car il peut aisement etre 
remplace par l'element <span> dote d'un style au choix. On peut le considerer comme une 
survivance des versions anciennes de HTML employees sans CSS. 

Le code suivant : 

<p> Dans 1 'equation <code> ax+bg = c </code> les variables sont <var> x </var> 
et <var> y </var> </p> 

met en evidence les variables x et y (voir l'exemple 3-7 (repere ©) et la figure 3-8). 

L'exemple 3-7 rend compte d'une utilisation de tous ces elements en ligne. 

Exemple 3-7. Les elements semantiques en ligne 

<?xml version="l .0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les elements semantiques en 1 i gne</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 

< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

<style type="text/css" > 
.gras (font-size:larger; font-weight:bold; |Q 

</style> 
</head> 
<body> 
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<!-- L'element abbr --> 
<hl>Abrevi ations</hl> 

<p>La masse se mesure en <abbr title="kilogramme" onmouseover="alert( 'Unite 
de masse: kilogramme' )">kg</abbr>© 
La force se mesure en <abbr title="Newton" onmouseover="al ert( 'Unite de force: 
Newton')">N</abbrXbr />© 

</p> 

<!-- L'element acronym --> 
<hl>Acronymes</hl> 

<p>Utilisez vite <acronym title="eXtensible HypertText Markup Language"> 

XHTML l.K/acronym> promis a un grand avenir.! Q 
</p> 

<!-- L'element bdo --> 
<hl>Sens de 1 ecture</hl> 
<p>Lire de gauche a droite 
<bdo dir="ltr" xml :lang="fr">XHTML</bdo> ou de droite a gauche 
<bdo dir="rtl" xml :lang="ar">XHTML</bdo>0 

</p> 

<!-- L'element cite --> 

<hl>Citations</hl> 

<p>Comme le disait Boris Vi an 
<cite title="Vian 1920-1959"> La verite n'est pas du cote du plus grand nombre 
car on ne veut pas qu'elle y soit. Le jour ou 11 sera a meme, par sa culture 
et ses connai ssances , de choisir lui meme sa verite, il y a peu de chance 
pour qu'il se trompe.</cite>© 

</p> 

<!-- L'element code --> 
<hl>Code source en ligne</hl> 

<p>Pour creer une boite d'alerte en JavaScript, nous ecrivons par exemple: 

<code>al ert( 'Bonjour ' )</code>. Dans ce cas 1 'execution du script s'arrete.© 
</p> 

<!-- L'element dfn --> 

<hl>Definition en ligne</hl> 

<p>Ce batiment a la forme d'un pentagone 

<dfn>(polygone a cinq cotes)</dfn> et abrite des gens peu recommandables.© 
</p> 

<!-- L'element kbd --> 
<hl>Saisies clavier</hl> 

<p>Si vous en avez assez, tapez : <kbd>Ctrl+Alt+Suppr</kbd>, et au revoir!</p>© 

<!-- L'element q --> 

<hl>Ci tati oris courtes</hl> 
<p>Comme Hamlet posons nous la question : <q cite="http://www.funhtml .com/ 
hamlet.html" title="Hamlet : William Shakespeare" onclick="alert 
("Voir '+this.cite)">Etre ou ne pas être </q></p>© 

<!-- L'element samp --> 

<hl>Exemples en ligne</hl> 

<p>Le type de 1 'equation du premier degre a deux inconnues est : 
^» <samp> ax+by = c</samp>. Elle n'a pas de solution unique</p>© 
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<!-- L'element span --> 
<hl>Le conteneur span</hl> 

<p>Le langage <span cl ass="gras">XHTML</span> a pour complement indispensable 

les styles <span cl ass="gras">CSS 2</spanX/p>© 
<!-- L'element var --> 
<hl>Variables</hl> 

<p> Dans 1 'equation <code> ax+by = c </code> les variables sont <var> x </var> 
et <var> y </var> </p>© 
</body> 
</html> 



La figure 3-8 montre tous les affichages obtenus en utilisant ces elements semantiques en 
ligne. 
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Abreviations 



La masse se mesure en kg 
La force se niesure enX 



Acronymes 

Utffisez ^ite XHTML 1.1 promis a uti grand avenir.! 

Sens de lecture 

Lire de gauche a droite XHTML ou de droite a gauche LMTHX 

Citations 

Cornrue le disait Boris Vian La vurite r £ 'est pas du cote, du plus grand nombre car on ne veaof pas qu'ellex soil Le 
jour ou il sera a mime, par sa culture et ses cormaissaKces t de choisir lui mime sa verite, ily a pen de chance 
pour qu'ilse tramps. 
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Pour creer one bake d'alerte en JavaScript nous eerivoiis par exemple: alert ( 'Bon jour ■ ) . Dans ce cas I' execution du 
script s'arrete. 
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Definition en ligne 

Ce batitnenE a la forme d'un peiitagone (polygons a cinq cotes) et abrite des gens pen reeommandables. 

Saisies clavier 

Si vous en avez assez. tapez : Ctrl-hAlt-r-Siarcr. et au revoir! 

Citations courtes 

(Jomme Hanalet posotis nous la question : "litre on tie pas etre " * 

Exemples en ligne 

Let;.pe de i equation du premier de^e a deux incomiues est: ax-iv = c.Ellenapas de solution unique 

Le conteneur span 

Le langage XHTML a pour complement tndispensable les styles CSS 2 

Variables 

Dans lequarion ax-ev = z les v ariables sont.Y etv 
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Les styles physiques 

Parmi les elements en ligne utilisables pour contenir du texte, certains permettent de 
creer des styles physiques pour leur contenu. Une partie d'entre eux correspondent aux 
modifications courantes que chacun peut effectuer dans son traitement de texte, comme 
mettre un texte en gras, en italique, ou certains caracteres en indice ou en exposant. Ce 
type de marquage est independant de la taille et de la police de caracteres. D'autres ele- 
ments agissent de maniere relative sur leur contenu en permettant d'afhcher dans une 
police plus grande ou plus petite que la police utilisee dans le texte qui precede sans pre- 
juger de cette taille. A chacun de ces elements correspond un style par defaut qui peut 
donner satisfaction, mais dans le cas contraire ce style pourra etre personnalise a loisir 
avec CSS. 
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Mettre un texte en gras 

Pour mettre en gras une partie de texte comprise dans un bloc, il faut l'inclure dans l'ele- 
ment <b> (done entre <b> et </b>). II peut aussi contenir tous les elements en ligne et pos- 
sede tous les elements en ligne de tous les attributs communs. Nous pouvons egalement 
utiliser l'element <strong> pour obtenir le meme effet. II n'est pas possible d'imbriquer 
ces elements les uns dans les autres pour forcer le caractere gras d'un texte. 

Nous ecrirons par exemple le code suivant (voir l'exemple 3-8 (repere ©) et la figure 3-9) : 

<p> Le contenu suivant est <b> important </b>. La suite l'est moins. Mais ceci 
^» est <strong>egalement remarquable.</strong> </p> 

II sera toujours possible de redefinir raffichage obtenu pour ces elements et de differencier 
<b> et <strong> au moyen de styles CSS particuliers. 

Mettre du texte en italique 

Comme pour les elements precedents, il existe deux elements qui permettent d'afficher 
leur conteneur en italique. II s'agit des elements <i> et <em>. Nous pourrons egalement 
redefinir le resultat obtenu en creant des styles personnalises. 

Nous ecrirons, par exemple, le code suivant : 

<p>El ements i et em : Celui est en <i>caracteres italiques </i> et le suivant 

en<i><b> caracteres italiques gras</b></i> 
Celui est en <em>caracteres italiques </em> et le suivant en<em><b> 
caracteres italiques gras</b></emX/p> 

Nous y remarquons qu'il est possible d'imbriquer des elements <b> dans les elements <i> et 
<em> pour que le texte apparaisse a la fois en italique et en caracteres gras (voir l'exemple 3-8 
(repere ©) et la figure 3-9) : 

Modifier la taiile du texte 

A l'interieur d'une division de la page, nous pouvons modifier la taiile relative du texte 
en utilisant les elements <bi g> et <smal 1 >. Le premier permet d'afficher son contenu dans 
une taiile de police plus grande que celle de la police qui le precede. Le second permet 
d'afficher son contenu avec une taiile de police plus petite. En imbriquant les elements 
<big> ou <small> les uns dans les autres, on peut obtenir des tallies de police de plus en 
plus petites ou de plus en plus grandes. Le nombre d'imbrications possibles depend de la 
taiile de la police du conteneur des elements <bi g> ou <smal 1 >. 

Le code suivant : 

<p> Ce texte la est <big>grand, <big>encore plus grand, <big>et plus grand encore, 

<big>toujours plus grand </bigX/bigX/bigX/bigX/p> 
<p>Ce texte ci est <small>petit, <small>encore plus petit, <small>et plus petit 

encore, <smal 1 >toujours plus petit </smal 1 X/smal 1 X/smal 1 X/smal 1 ></p> 
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permettra d'obtenir des mots de plus en plus grands en imbriquant les elements <bi g>, puis de 
plus en plus petits en imbriquant les elements <smal 1 > sur quatre niveaux (voir l'exemple 3-8 
(reperes Q et 0) et la figure 3-9). Dans l'exemple 3-8, la taille de la police de l'element 
<body> a ete definie a 16 pixels a l'aide d'un style (repere 0) pour que l'effet des imbri- 
cations soit visible sur un plus grand nombre de niveaux qu'avec la taille par defaut. 

Creer des exposants et des indices 

Les traitements de texte offrent aussi la possibility de mettre des caracteres en exposant 
ou en indice. Cette operation est egalement possible en XHTML. Pour mettre un texte en 
exposant, il faut l'inclure dans l'element <sup> (entre <sup> et </sup>), et pour ecrire un 
texte en indice il faut l'inclure dans l'element <sub> (entre <sub> et </sub>). 

Nous pouvons avoir par exemple le code suivant dans l'exemple 3-8 (repere 0) dont le 
resultat est visible sur figure 3-9 : 

<p>Le n<sup>ieme</sup> terme de la suite numerique est note u<sub>n</sub>. 
La fonction cube est notee : x<sup>3</sup></p> 

Afficher du texte dans une police a espacement fixe 

Nous avons deja utilise l'element <code> pour afficher du texte dans un style listing. 
L'element <tt> (comme teletype) permet d'obtenir par defaut le meme resultat pour des 
textes courts en ligne. II peut contenir eventuellement tous les attributs communs. 

Nous pouvons, par exemple, ecrire le code suivant : 

<p> La fonction JavaScript <tt> alertO </tt> permet d'afficher une boite d'alerte. 
On peut ecrire, par exemple: <tt> alert(" Verifier votre code ") </tt> pour 
prevenir le visiteur.</tt> </p> 

pour mettre en evidence dans un paragraphe du code JavaScript (voir l'exemple 3-8 
(repere 0) et la figure 3-9). 

Creer un retour a la ligne 

L'element <br /> permet de creer un retour a la ligne. C'est un element vide, d'ou 1' utili- 
sation du caractere antislash (/) en guise de signe de fermeture. II possede les attributs de 
base i d, cl ass, ti tl e, mais ceux-ci n'ont pas un interet particulier. 

L'exemple 3-8 utilise successivement 1' ensemble de ces elements, creant des styles phy- 
siques. 

Exemple 3-8. Les elements de style physique 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
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<head> 

<title>Les elements de style physique</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 

< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

<style type="text/css" > 

body{font-size:16px; O 

</style> 
</head> 
<body> 

<p>Elements b et strong : Le contenu suivant est <b> important </b>. La suite 

l'est moins. Mais ceci est <strong>egal ement remarquable.</strong> </p>© 
<p>Elements i et em : Celui est en <i>caracteres italiques </i> et le suivant 

en<i><b> caracteres italiques gras</b></i> 
Celui est en <em>caracteres italiques </em> et le suivant en<em><b> caracteres 

italiques gras</bX/emX/p>© 
<p> Ce texte la est <big>grand, <big>encore plus grand, <big>et plus grand encore, 

<big>toujours plus grand </bigX/bigX/bigX/bigX/p>© 
<p>Ce texte ci est <small>petit, <small>encore plus petit, <small>et plus petit 

encore, <smal 1 >toujours plus petit </smallX/smallX/smallX/smallX/p>© 
<p>Le n<sup>ieme</sup> terme de la suite numerique est note u<sub>n</sub>. 

La fonction cube est notee : x<sup>3</supX/p>© 
<p> La fonction Java Script <tt> alertO </tt> permet d'afficher une boite 

d'alerte. On peut ecrire, par exemple: <tt> alertC Verifier votre code ") 

</tt> pour prevenir le visiteur. </p>© 
</body> 
</html> 

La figure 3-9 presente l'ensemble des resultats obtenus en utilisant ces elements. 
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Figure 3-9 

Les elements de style physique 
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Les listes 

La presentation sous forme de liste permet une structuration de 1' information telle qu'elle 
peut apparaitre dans une table des matieres. On peut egalement mettre en evidence les 
points importants. Les utilisateurs de traitement de texte sont familiarises avec cette 
facon de proceder. Elle implique qu'une serie d' informations aient un rapport entre elles, 
par exemple sous forme d'enumeration d'une liste de taches a realiser. Ces listes d'infor- 
mations peuvent etre numerotees ou marquees par une puce graphique. De la meme 
facon, avec XHTML on peut creer des listes d'items numerotees, nominees listes ordon- 
nees, ou de listes a puces, nominees listes non ordonnees. Un troisieme type de listes 
permet egalement d'enumerer des termes et d'en donner les definitions. Les elements 
permettant la creation de listes ne sont pas des elements de bloc a proprement parler, 
mais ils ont un comportement similaire et peuvent etre inclus directement dans 1' element 
<body>. 



Les listes ordonnees 

Pour creer une liste dans laquelle la notion d'ordre a une importance, nous pouvons utili- 
ser une liste ordonnee dont chaque item sera numerate par defaut a l'aide d'entiers incre- 
mented de 1 a N, suivis d'un point puis du contenu de chaque item. Cette presentation 
type resulte du style utilise par defaut par les navigateurs mais nous verrons dans la 
deuxieme partie de ce livre (voir le chapitre 15, Le style des listes) que la presentation des 
elements de liste peut etre beaucoup plus variee en utilisant des proprietes CSS 2 
specifiques. Une liste ordonnee doit commencer par 1' element <ol > (pour ordered list) qui 
doit obligatoirement contenir au moins un element <1 i> qui lui-meme renferme le contenu 
visible de chaque item. II faut done que <ol> contienne autant d'elements <li> qu'il y a 
d'items dans la liste desiree. L'element <ol> ne peut rien contenir d'autre, meme pas de 
texte brut. La structure d'une liste ordonnee est done la suivante : 

<ol> 

<H>Item K/li> 

<li>Item 2</li> 

<li>Item 3</li> 
</ol> 

Les elements <1 i > peuvent avoir un contenu tres varie, qu'il s'agisse de texte, de titres, de 
tous les elements de niveau bloc, des elements en ligne et d'autres elements de liste. 
Le tableau 3-12 donne la liste des elements enfants de l'element <1 i >. 

Tableau 3-12. Les elements enfants de l'element <li> 

Texte , a, abbr, acronym, address, b, bdo, big, blockquote , br, button, cite, code, del, dfn, div, dl, em, fieldset, 
form, hi , h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, object, ol, p, pre, q, samp, script, 
select, small, span, strong, sub, sup, table, textarea, tt, ul, var 
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L'exemple 3-9 montre une utilisation des elements <ol> et <li> pour creer des listes 
ordonnees. L' element <ol> contient trois elements <li> creant ainsi trois items (reperes 
O O et ©)• Tous ces elements <1 i > renferment chacun un titre <h3> (reperes ©, © et ©) 
et un paragraphe (reperes ©, © et ©). 

Exemple 3-9. Une liste ordonnee 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<title>Les listes XHTML</titl e> 

<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-l" /> 
</head> 
<body> 

<hl>Les listes</hl> 

<h2>Les listes ordonnees</h2> 

<ol> 
<li>© 

<h3>Le premier jour</h3>© 

<p> In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et di visit . . </p>© 

</li> 

<li>© 

<h3>Le deuxieme jour</h3>© 

<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras.. 
</p>© 

</li> 

<li>© 

<h3>Le troisieme jour</h3>© 

<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras.. 
</p>© 
</li> 
</ol> 
</body> 
</html> 
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La figure 3-10 presente le resultat obtenu. 
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Les listes 

Les listes ordonnees I 

1 Le nmmer jour 

In principio credit Deu; caelum et terrain terra autem erat inani; et vacua et tenebrae ;uper laeiem aby;;i et ;piritu; Dei terebatur super aqua-; divitque 
Deu; fiat tu\ et facta e;t ln\ et T .idrt Deu; luceni quod e;;et bona et dhisit tucem ac tenebra; appellavitque hicetu diem et tenebra;- ncctein tactumque 
e;t ve;pere et mane die; unu; dixit quo que Deu; fiat Irrmamenturn in medio aquaruni et dhirlat aqua; ab aqui; et fecit Deu; finuatnentuiu dM;itque 
aqua; quae erant ;ub firmameiito ab hi; quae erant ;uper firmamentum et factum e;t ita vocasrtque Deu; firmamentum caelum et factum e;t ve;pere et 
mane die; ;ecundu; dixit vero Deu; congre^encur aquae quae ;ub caelo ;unt in locum uiiuni et appaieat atida tactumque e;t ita 

: Le (Jeusieme jour 

in prinripin creiYiir Dens CMiNM et rrrrmn lenvi unrein prat inniiis eTvncufl et reuebrflp siippr fnc iem fibvssi er spirims Deirerebfimr super rtqims rflrltiKTM 
IJpus tiilt Inf et them est tin et -.idrt I )eus rue cm qnod esser honn et dirisir hirem renehrns apprfUvitque Inrem diem er renebras iiortrm fcVtiunqne 
esr sipspere et mane dips nuns dixit qnrique [Jens Nat tiniiflinentiim ill medio nqnamm et linidar aquas Fih aqnis er tprit ] Jpus timiampntiuii dKisitqne 
aquas quae eranr sub tintianieiiro fib his quae er.n* super tintinnieiirum er riirmm esr ira vocaiiTqur Dens rimianienhim rMkn er rarniitr esr vespprp et 
mane dies seenndus dixit vem ileus roup-ppeiimr aquae quae sub mplo sunt in loruni lunim er apparent arida racTiunqne est ira 

; I,r frrHsiomr jour 

in prinripio creavir Dens rarhim er retrain terra aureiir erar iiinriis eT vacua et reurhrae super faciem abvssi er spirims I )ei rerebamr super aquas ilixirqnie 
Deu; liul el liicla e;L lu\ el .idil Deui luceni quod e;;eL bona et diliiil luceiri ac lenebias appeDa, ilque iucem Jieru el LeiiebiaS noetsra laciuiiique 
est 1 e;peie el mane dies until diiil quoque Dens fial fninaruenlum in medio aquarian el ifr.idal aqua; ab aqui; el fei.il Deu; in mamenluui diiisilque 
aqua; quae eiaul sub fiunaiuemo ab liiv quae ermu ;upei Eiiiuauieiirun] tt&CtaH e;L ita 1 ueaiilque Deu; finnauieinmu caelum el factum e;l ve;peie et 
mane die; ;ecuiidu; di\il leioDeu; ctmis eiiemui aquae quae ;ub cuelo ;uul in locum uimm el appal eal aiida facluiiique e;lila 
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Figure 3-10 

Une liste ordonnee et son style par defaut 



Les listes non ordonnees 

Les listes non ordonnees {unordered list) fournissent un outil de structuration similaire 
au precedent mais sans la notion de numerotation. Elles sont egalement appelees listes a 
puces car chaque item est precede d'une puce graphique qui, par defaut, est un disque 
plein de la me me couleur que le texte qui la suit. Nous verrons au chapitre 15 que ces 
puces graphiques peuvent etre personnalisees a volonte. Une liste a puces est introduite 
par l'element <ul > et fermee par </ul >. Comme l'element <ol >, son seul contenu direct est 
un ou plusieurs elements <1 i >. Le contenu de chaque element <1 i > est le meme que pour 
les listes ordonnees. La structure d'une liste a puces est done la suivante : 

<ul> 

<1 i >Item K/li> 
<li>Item 2</li> 
<1 i >Item 3</li> 
</ul> 
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L'exemple 3-10 montre une utilisation complete d'une liste a puces. L' element <ul> 
contient trois elements <li> creant ainsi trois items (reperes ©. O et ©)• Tous ces 
elements <li> contiennent chacun un titre <h3> (reperes ©, et ©) et un paragraphe 
(reperes ©, et 0). Nous pouvons noter que le code est pratiquement identique a celui 
de l'exemple 3-9, la seule difference residant dans le remplacement de l'element <ol > par 
<ul>. 

Exemple 3-10. Une liste a puces 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 
<head> 

<title>Les listes XHTML</titl e> 

<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-l" /> 
</head> 
<body> 

<hl>Les listes</hl> 

<h2>Les listes ordonnees</h2> 

<ol> 
<li>0 

<h3>Le premier jour</h3>© 

<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et di visit . . </p>© 

</li> 

<li>© 

<h3>Le deuxieme jour</h3>0 

<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras.. 
</p>0 

</li> 

<li>© 

<h3>Le troisieme jour</h3>© 

<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras.. 
</p>© 
</li> 
</ol> 
</body> 
</html> 
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La figure 3-1 1 montre le resultat obtenu. 
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I .os listes 

Les listes ii puces 

♦ Le premier jour 

In principio eretrsit Deus caelum ct terrain tena autem crat innrus ct vacua ct tencbrne super fadem abyssi cc spiritus Dei fere batur super aquas dixitquc 
Deus fiat tux ct facta est tux ct 'Lidit Beus lucem quod csset bona ct dttisit lucem ac tcnebras appeLkiutque Juccm diem ct tenebfas noctcm tnctuinquc 
est vespcre ct mane dies units dixit quoquc Deus fiat ftnnamctjtunt in medio nquamni ct dhidat aquas ab aquis ct fecit Deus finuamentuui dhisitque 
aquas quae crant sub fimiamcnto ab his quae erant sup er firmamenrum ct factum est ita vocautque Deus firmaincntum caelum et factum e 5t vesperc ct 
mtinc dies secundum dixit vero Deus conErcE/ciirur aquae quae sub eaclo sunt in locum uuuin et oppareat aridn thctumquc est ita 

♦ T.r detXleltlc jour 

In principle crcaiit Deus e ac-luiri ct terrain terra autem erat iuaius ct vacua et tenebrae super faciem abvssi ec spirirus Dei terebarur super aquas dixitque 
Deus full lux el facia esL lu\ el .ida Beus lucem quod esse! bona et duk.il lueeiu ac leEiebras appella* uque lueeui diem el Lenebj as uoc Leiu laoLuinque 
est * espeie ei uiaue dies unus diuL quo que Deus iiaL Ji mamecilum in medio aquaruin el div idul aquas ab acics e . le en Deus lu inamenLum dhisUque 
aquas quae erain sub urrnaiuemo ab tiU quae tram super Ercmaiijeutum el faeluri] est ila * oca^ilque Deus urmaEiremuni caelum el factum esl vespere eL 
mane dies secuudus Sxil \eioDeus coma eLLerilrre aquae quae sub caelo sum in locum lujuul et appal eaL arida [acLuurque est ila 

♦ Le rromeme jour 

In principle crea.it Deus caelun] el terrain terra autem e] at inauis el ■. acun el teueb] ae super faciem ab.ssi et spiritus Deiferebann super aquas diutque 
Deus IruL lux eL facia est lu\ eL .idiL Deus luceru quod esset bona et ditisil lucem ac leEiebras appella^uque lucem dieu] eL Lenebj as noc Leiu lacLuanque 
est vespere et mane dies unus" dixit quo que Deus fiat trnnamentum in medio aquarum et dhidat aquas ab aquis ei fecit Deus finnarnentuni dhisitque 
aquas quae crane sub firmamenio ab his quae erani super firmanienrum et faeium est ka vocatitque Deus firmamenrum caelum et factum esi vespere ec 
mane dies secuudus dixit vero Deus conureuenrur aquae quae sub caelo sum in locum unutn et appareat arida ractumque est ita 
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Figure 3-11 

Une liste a puces et son style par defaut 



Les listes imbriquees 

L' element <1 i>, seul contenu autorise des elements <ol> et <ul>, peut lui-meme avoir un 
contenu tres varie, et contenir d'autres elements <ol> ou <ul>. Ainsi, nous pouvons 
exploiter cette propriete pour creer des listes imbriquees les unes dans les autres. Nous 
obtenons ainsi plusieurs niveaux de numerotation ou de puces, a l'instar d'une table des 
matieres qui reflete les titres des chapitres puis les titres des differentes sections les com- 
posant. Chaque element <1 i > de premier niveau contient une element <ol > ou <ul > qui lui- 
meme renferme des elements <1 i> de deuxieme niveau. 

La structure des listes ordonnees imbriquees est done la suivante : 

<ol> 
<li>Item 1 
<ol> 

<li>Item 1 A</li> 
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<li>Item 1 B</li> 
</ol> 
</li> 

<li>Item 2 

<ol> 

<li>Item 2 A</li> 
<li>Item 2 B</li> 
</ol> 
</li> 
</ol> 

La numerotation des listes ordonnees de deuxieme niveau figure par defaut en chiffres 
arabes et reprend a 1 pour chaque liste de deuxieme niveau. De plus, les contenus des 
items de deuxieme niveau sont indentes par defaut par rapport a ceux du niveau supe- 
rieur. Pour creer des listes imbriquees a puces, il suffit de remplacer les elements <ol > par 
<ul>. Notons que, dans ce cas, les puces de deuxieme niveau sont par defaut des cercles 
au lieu de disques, ce qui permet de distinguer chaque niveau. 

II est aussi envisageable de creer des listes a puces imbriquees mixtes, c'est-a-dire dans 
lesquelles un element <ul > est utilise comme descendant de l'element <ol >, et reciproque- 
ment. L'exemple 3-11 montre une possibilite de mise en ceuvre de listes imbriquees. Le 
premier niveau est constitue d'une liste numerotee (repere O) qui contient deux elements 
<1 i> de premier niveau (reperes et 0). Chacun d'eux contient alors une liste a puces 
(reperes © et ©) qui inclut a son tour deux elements <1 i > de second niveau (reperes © et 
puis et 0). 

Exemple 3-11. Les listes imbriquees 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<title>Les listes imbriquees</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<hl>Listes imbriquees</hl> 
<ol>0 

<li><h2>Le premier jour</h2>0 
<ul>© 

<li><p>In principio creavit Deus caelum et terram terra autem erat inanis et 
vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux ..</p> 

</li>© 

<li><p>Benedixitque illis Deus et ait crescite et multiplicamini et replete 
terram et subicite earn et dominamini piscibus maris et volatilibus caeli 
et. .</p> 
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</ll>© 

</ul> 
</li> 

<li><h2>Le deuxieme jour</h2>© 
<ul>© 

<li><p>In principio creavit Deus caelum et terrain terra autem erat inanis et 
vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux . .</pX/li>© 
<1 i><p>Benedixitque illis Deus et ait crescite et multiplicamini et replete 
terram et subicite earn et dominamini piscibus maris et vol ati 1 i bus caeli 
et . .</p></li>© 
</ul> 
</li> 
</ol> 
</body> 
</html> 

La figure 3-12 montre le resultat obtenu. 



IS ImlMmimlir^iiiHm -Mci/iMn fZTlfpTl^l 




^ - - ^ ^ j http:/j^v^h^W.conri/^ lLrvM v 1 Rcchcrdicr 1 ^ - 
■■\ hTecedent ::. = ^- ' Imprimer 


H 


1; .^Aiiurl ^Jhlrtniiw-firtgi-N £. nOTTYPF Ainl ... ^WkL]Lwi^I»ki [ifyH... ^.Trt rV*|UM fa Wrh ... ^T*i- '.V V r^rtini Vnl... ^FUI.m- a ^RFF RFF VKTMI 1.1 ^fSS ? fi 


sjl^Cnhout Vers te haut **-Lc orefrner ^Precedent ^Sivant ^Ledcmer t "^Document [^PLs 


Listes imbriquees 




i Le premier jour 




Q 111 priiicipio LieaT,il Deus caelum eL Leiiaiu leiia -ameni eraL iii^tU eL ^ iicu^ et Lenebiae super facieii! alr^ b bi eL ijjniLijb Deiieiebalm supei aqua. 1 




dbatque Deus Hat hrt et tacta c st hit ct "ridit Deus luccm quod c 5 set bona et divtsit lucem ac tenebrae appdUnitque be cm diem et tenebras 




nactem 




^ BenedbiLque UUb Deus el ail uebuite el mLJlipbcaiiimi el i epleLe Letiinn el bubiuile tint] eL duiriinaiiinii pibuibut. maiib eL * uSauKbut. uiieli el 




unrvcrsis animantibus quae inovcaitur super terram dLxitque Deus ccee dedi vobis omiicm hcrbam adferentem scincn super terram et universa 




Ikjia quae habent in semet ipsis b'emeaitem Generis sui ut sint \obk in escam 




i. Le deu\ieme jour 




o III prmcipio creaut Deus caelum et terram terra autem erat iuanis: et vacua et tenebrae super faciem abvsss et spiritus Dei ferebatur super aquas 


iK.vilqiit" Dni*i Ji;il \n\ fl f;iL)a fhI 1u.\ H Drus liurrn qiincl fhhrl blXXH t"L dt\isi[ humi at. Crricbrns, ajij ii que liu'tin dirr.ii i*l 1 erici n a 




iioctem 




" Benedkitque illis Deus ei ait erebcite etmuMplicainini et replete terram et subicite earn ei dominamini pkcibus maris et volatilibus caeli et 




linrvrrsU ^iiiin/tntihn s quae mcrvriitiir super terrain rlreirqnr Dem rrrr drdi VObtS nmneirt hrrbrtin rtrrrrirenirr-ni srninn ^iper If irjim et niiiver^rt 




Ibma quae Jiabent in ^cinet ipsis scmcaitem generis sui ut sint vobis in cseam 


V 


sjf. m c^g E ! -ip-^d 1 



Figure 3-12 

Des listes imbriquees 
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Les listes de definitions 

Une liste de definitions permet de creer une liste de termes, chacun d'entre eux etant 
suivi de sa definition. Le conteneur de l'ensemble de la liste est l'element <dl > qui ne 
peut contenir que des elements <dt>, <dd>, ou l'element <dl> lui-meme et rien 
d'autre. Le plus souvent, l'element <dt> contient le terme et <dd> en renferme la defi- 
nition. Par defaut, la definition est affichee a la ligne et indentee par rapport a la ligne 
du terme. L'element <dl> peut etre inclut directement dans le corps du document 
<body> mais aussi dans d'autres elements divers, dont la liste figure dans le tableau 3-13. 

Tableau 3-13. Les elements parents de <dl> 

blockquote, body, button, dd, del, div, fieldset, form, ins, li , map, noscript, object, td, th 



L'element <dt> peut contenir tous les elements en ligne dont la liste figure dans le 
tableau 3-14. 

Tableau 3-14. Les elements enfants de <dt> 

Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, label, map, 
object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var 



L'element <dd> a un contenu plus etendu car il peut contenir tous les elements en ligne 
mais egalement des elements de bloc, dont la liste figure dans le tableau 3-15. 

Tableau 3-15. Les elements enfants de <dd> 

PCDATA, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, dl, dfn, div, dl, em, fieldset, 
form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, object, ol, p, pre, q, samp, script, 
select, small, span, strong, sub, sup, table, textarea, tt, ul, var 

La diversite de ces elements enfants permet de structurer des informations beaucoup plus 
variees que de simples definitions de termes. Nous pouvons par exemple envisager de 
creer des listes d' images ou de paragraphes. 

La structure de base d'une liste de definitions est done la suivante : 



<dl> 

<dt>Terme K/dt> 
<dd>Definition K/dd> 
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<dt>Terme 2</dt> 
<dd>Definition 2</dd> 
</dl> 

Les navigateurs affichent les definitions indentees de plusieurs caracteres par rapport 
aux termes. L'exemple 3-12 cree une liste de definitions (repere O) con tenant quatre 
elements <dt>, lesquels renferment des sigles informatiques (reperes ©. ©, ©, ©). 
Les elements <dd> qui suivent chacun d'entre eux donnent les definitions contenues 
dans des elements <fieldset> qui pourraient s'etendre sur plusieurs lignes (reperes ©, 

©Oct O). 



Exemple 3-12. Les listes de definitions 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les listes de definitions</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 
<dl>© 

<dt>XHTML</dt>© 

<dd><fieldset>eXtensible HyperText Markup Language : le langage moderne de 

creation de pages web. . .</fieldset></dd>© 
<dt>CSS</dt>© 

<dd><fieldset>Cascading Style Sheet : le langage de creation des styles et du 

design. . .</fieldset></dd>© 
<dt>PHP</dt>© 

<dd><fieldset>PHP Hypertext Preprocessor : le meilleur langage de creation de 

pages dynamiques. . .</fieldsetX/dd>© 
<dt>SQL</dt>© 

<dd><fieldset>Structured Query Language : le langage d'interrogation des bases 
de donnees. . .</fieldsetX/dd>© 

</dl> 
</body> 
</html> 

La figure 3-13 montre le resultat obtenu avec le style par defaut. 
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Figure 3-13 
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Comme les listes numerotees ou a puces, il est possible de creer des listes imbriquees en 
incluant des elements <dl> dans l'element <dd>. 



Exercices 

Exercice 1 : Ecrivez une page contenant des titres de chapitre suivis d'une introduction 
puis de paragraphes ayant chacun un titre. Choisissez les elements appropries a une 
bonne structuration. 

Exercice 2 : Creez deux divisions contenant chacune un titre general et deux paragra- 
phes ayant chacun un titre. Quel interet peut avoir cette disposition par rapport a celle de 
1' exercice 1 ? 

Exercice 3 : Ecrivez des titres de chansons puis le texte de la chanson dans un bloc de 
citation. Tracez une ligne de separation entre chaque bloc. 

Exercice 4 : Ecrivez un bloc qui contient du code XHTML en preservant les espaces du 
code. 

Exercice 5 : Ecrivez une liste d'adresses e-mail indiquant les differents contacts possibles 
sur le site. 

Exercice 6 : Ecrivez plusieurs abreviations et leur definition respective dans leur attribut 
title. L' ensemble doit etre inclut dans un element adequat. Une boite d'alerte doit afficher 
cette meme definition quand le curseur survole le texte de l'abreviation. 

Exercice 7 : Incluez des citations courtes dans le texte d'un paragraphe. 
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Exercice 8 : Ecrivez les textes suivants : u n =2(u n _j + u n _ 2 ) et f(x)=3x 4 +7x 3 -9x 2 pour 
qu'ils s'affichent de cette facon. 

Exercice 9 : Incluez du code source de plusieurs balises XHTML dans un texte normal, 
par exemple <html > ou <head>. 

Exercice 10 : Ecrivez les mots « XHTML » et « CSS » en gras dans un texte normal. 

Exercice 11 : Ecrivez les mots « XHTML » et « CSS » dans un element afin de leur 
appliquer un style particulier par la suite. 

Exercice 12 : Ecrivez des mots en italique, des mots dans une taille plus grande et 
d'autres dans une taille plus petite dans un texte inclut dans un paragraphe. 

Exercice 13 : Creez une liste de noms numerotee de 1 a 4. 

Exercice 14 : Creez la meme liste de noms avec des puces. 

Exercice 15 : Creez une liste imbriquee. Le premier niveau doit avoir des puces et le 
second des numeros. 
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Inserer des images 
et du multimedia 



On n'envisage plus aujourd'hui un site sans images, comme paradoxalement peut l'etre 
celui de W3C, qui a l'excuse de ne pas etre grand public, mais uniquement tres technique 
et destine aux specialistes. Les sites grand public se doivent done d'egayer leurs pages 
avec des illustrations photographiques ou simplement graphiques. L'abus d'images 
pouvant se reveler aussi nocif que leur absence en termes d'attractivite du site pour le 
visiteur, il appartient au concepteur d'effectuer un choix judicieux de ses illustrations. De 
plus, il faut encore tenir compte du poids des images en kilo-octets, car les connexions 
ADSL ne sont pas encore majoritaires. Le poids des images est sans commune mesure 
avec celui du code d'une page XHTML et vient rapidement allonger le temps d'afhehage 
complet d'une page si elle en contient beaucoup. 

Les types d'images 

Les navigateurs actuels n'acceptent qu'un nombre restreint de types d'images et il 
faudra vous limiter aux trois grands types les plus utilises et enregistrer vos images 
selon les formats presentes ci-apres, qui sont suffisants pour satisfaire tous les besoins 
d'un concepteur de sites : 

• GIF: Graphics Interface Format, ayant pour extension .gif. Ce format est lirnite a 
256 couleurs et est done deconseille pour les photographies ayant une grande plage de 
teintes differentes. On l'utilisera en priorite pour des icones, des dessins ou des bandeaux 
publicitaires car il presente aussi l'avantage de permettre la creation de petites animations 
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et l'entrelacement qui va permettre l'affichage progressif de 1' image, d'abord en basse 
resolution puis, au fur et a mesure du chargement, a la resolution maximale. 

• JPEG : Joint Photographic Experts Group, ayant pour extensions .jpegou . j pg. Ce for- 
mat permet la creation d'images en 24 bits (16 millions de couleurs), et est done tres 
adapte aux photographies realistes. En contrepartie toutefois, les images JPEG ont 
habituellement un poids plus important en Ko, ce qui ralentit leur chargement. 

• PNG : Portable Network Graphics, ayant pour extension .png. Ce format est assez 
recent et a ete concu comme alternative au format GIF qui faisait l'objet (theorique- 
ment, car qui s'en preoccupait ?) de droits d'auteurs, les inventeurs de ce format pou- 
vant vous reclamer des royalties. Le format PNG cree a 1' initiative du W3C est done 
libre de droit et permet normalement la creation de graphiques et de photographies. 
Comme il est de creation recente, les vieux navigateurs (de generation 3) ne le reconnais- 
sent pas, mais comme ils sont desormais tres minoritaires, vous pouvez 1' employer 
sans trop de crainte. 

A premiere vue, une image GIF ou PNG aura un poids plus faible qu'une image JPEG ; 
cependant, e'est la variete des teintes de l'image (la palette des couleurs) qui va influencer 
le poids final de l'image. Quand vous creez une image, essayez done systematiquement de 
l'enregistrer sous les trois formats. Vous serez parfois surpris par le poids reel des images 
obtenues et vous pourrez choisir la moins lourde, done celle qui s'afhehera le plus vite dans 
votre page. Ne vous fiez pas non plus au temps d'affichage des images dans votre naviga- 
teur lors de vos tests, car le fichier provient directement de votre disque dur dans le navigateur, 
et ce temps de chargement n'a rien a voir avec celui que les visiteurs du site auront a subir 
si votre image « pese » 100 Ko par exemple. Pour faire bonne mesure, diminuez la defini- 
tion des photos numeriques pouvant atteindre une taille de 2 Mo. De plus, on estime gene- 
ralement qu'apres 5 secondes d'attente, un visiteur moyen commence a s'impatienter. 
Testez done vos pages en ligne pour vous mettre dans la situation de vos visiteurs. 



L'insertion d'images 

L'element <img /> 

L' element <img /> permet d'inclure des images dans une page web. II s'agit d'un element de 
type en ligne et generalement il doit etre inclus directement dans un element de type bloc, 
dans une liste, ou encore un grand nombre d'autres elements en ligne. C'est un element vide, 
d'ou l'utilisation du symbole de fermeture incorpore a la fin de la balise d'ouverture. 

Le tableau 4-1 donne la liste de tous les elements parents de l'element <img />. 

Tableau 4-1. Les elements enfants de l'element <img /> 

a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, M, h2, 
h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, q, samp, small, span, strong, sub, sup, td, th, tt, var 
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L' element <img /> est qualifie d'element remplace car l'affichage obtenu n'est pas le 
contenu de l'element qui est vide. C'est en agissant sur ses attributs que Ton peut definir 
l'image et ses caracteristiques. L'image obtenue a l'ecran provient d'un fichier externe 
simplement reference par l'attribut src. En outre, les dimensions de l'image ne sont pas 
necessairement egales a celles de l'image originale car elles sont fixees par les attributs 
height et width. L'element <img /> possede tous les attributs communs, tels id et title, et 
les gestionnaires d'evenements communs. Nous allons voir maintenant les differents 
attributs de cet element qui permettent de bien gerer les images. 

• L'attribut src : precise l'adresse relative ou absolue du fichier image que Ton desire affi- 
cher dans la page. Son utilisation est done obligatoire. Nous ecrivons par exemple : 

<img src="image.png" /> 

pour une adresse relative, ce qui suppose que le fichier PNG est situe dans le meme 
repertoire que le fichier XHTML qui l'incorpore. En ecrivant : 

<img src="http://www. votresite.com/images/image.png" />, 

nous definissons une adresse absolue, l'image pouvant done figurer sur un autre ser- 
veur que le notre. Lutilisation des adresses relatives est preferable en vue de faciliter 
la maintenance du site. Si le fichier n'est pas disponible, les navigateurs affichent une 
icone a la place. 

• L'attribut alt : sa presence est egalement necessaire et il doit contenir un texte four- 
nissant une breve description de l'image. Ce texte apparaitra a la place de l'image si 
celle-ci n'est pas disponible (absente du repertoire cible ou illisible). II est egalement 
utilise par les navigateurs n'affichant pas les images et il sera lu par les navigateurs 
specialises pour non-voyants. L'attribut ti tl e peut contenir un texte similaire. 

• Les attributs height et width : permettent de definir respectivement la hauteur (height) 
et la largeur (width) qu'aura l'image sur le media d'affichage. Ces dimensions peuvent 
etre definies a 1' aide d' un pourcentage. Dans ce dernier cas, les pourcentages font refe- 
rence aux dimensions de l'element parent de l'image. Si la fenetre du navigateur est 
redimensionnee, les dimensions de l'image seront alors recalculees, laissant l'image 
entierement visible. La definition de ces attributs accelere l'affichage dans les naviga- 
teurs car elle leur permet de determiner la zone d'affichage avant meme d' avoir tele- 
charge l'image. Le poids de l'image en kilo-octets ay ant une influence evidente sur le 
temps de chargement de la page, il est deconseille de definir des dimensions nettement 
inferieures a celles de l'image originale. II vaut mieux dans ce cas creer un autre 
fichier image de dimensions reduites dont le poids sera plus petit. Si le rapport entre 
les valeurs des attributs height et width n'est pas le meme que celui de l'image reelle, 
il en resulte une deformation de cette derniere, sans doute peu esthetique (a moins que 
cela ne soit volontaire). II faut done verifier les dimensions reelles de l'image avant 
d'utiliser ces attributs. 

• L'attribut 1 ongdesc : con tient 1' URL d'un document ecrit qui peut fournir des expli- 
cations beaucoup plus detaillees que celles des attributs alt ou title. Les naviga- 
teurs n' affichent pas directement ce contenu ni l'URL indique. Pour exploiter cette 
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information, il faudra utiliser la propriete CSS content qui permet de recuperer la 
valeur de l'attribut 1 ongdesc et d'afficher l'URL de la description. 

• L'attribut ismap : s'il est utilise, il precise qu'il existe une grille creant des zones 
sensibles au clic dans l'image. Ces zones sont l'origine de liens hypertextes depuis 
1' image vers des documents externes ou des parties de la page. L'attribut prend la valeur 
booleenne unique ismap. II est toujours associe a 1'attribut usemap presente ci-apres. 

• L'attribut usemap : indique l'identificateur (l'attribut id) de l'element <map> qui definit 
les zones sensibles au clic de l'image. La valeur de l'identificateur doit etre precedee du 
caractere diese (#). Nous allons voir dans la section suivante comment delimiter ces 
zones. 

L'exemple 4-1 permet d'incorporer plusieurs images dans une page. La premiere est 
incluse dans un paragraphe et possede les dimensions initiales du fichier image (soit 
466 x 378 pixels) car les attributs height et width ne sont pas precises (repere Q)- 
La deuxieme, incluse dans le meme element <p>, a des dimensions fixees a 20 % des 
dimensions reelles de l'image (repere ©). Remarquons que si l'element parent n'a pas 
une hauteur fixee, il n'est pas utile de definir une hauteur d'image en pourcentage car 
cela peut causer des deformations de cette derniere. La seule definition de la largeur suffit, 
et les proportions sont ainsi conservees. La troisieme a etre incluse dans un element <div> 
est du type TIFF et ne peut pas etre affichee directement par les navigateurs (repere ©). 
C'est done le contenu de l'attribut alt qui apparait a sa place. Les images suivantes sont 
incluses dans des elements d'une liste non ordonnee avec des dimensions fixees explici- 
tement en pixel et en donnant une adresse absolue (reperes © et 0). 

Exemple 4-1. Insertion d'images dans une page 

<?xml version="l .0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Insertion d'images</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<hl>Insertion d'images</hl> 
<P> 

O <img src=". ./images/xjrl300. jpg" alt="Ma moto : Yamaha XJR 1300" 

title="Yamaha XJR 1300: pas mal!" /> 
©<img src=". ./images/xjrl300. jpg" alt="Ma moto : Yamaha XJR 1300" 

title="Yamaha XJR 1300: fun!!" width="20r/> 
<!-- Ne pas definir la hauteur en pourcentage sauf si le conteneur a une hauteur 

connue --> 

</p> 
<div> 
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®<img src="romy.tif" alt="Cette image n'est pas accessible"/) 
</div> 
<ul> 

©<li><img src="http://funhtml .com/images/xjrl300. jpg" alt="xjr 1300" width="45" 

height="35" /> YAMAHA XJR 1300</li> 
0<liXimg src="http://funhtml .com /images/zrxl200. jpg" alt="zrx 1200" 

width="45" height="35" /> KAWASAKI ZRX 1200</li> 
</ul> 
</body> 
</html> 

Les figures 4-1 et 4-2 montrent les resultats obtenus quand le navigateur occupe toute la 
fenetre (figure 4-1) et quand celle-ci est reduite (figure 4-2). Nous pouvons y remarquer 
que, si la premiere image a toujours la meme taille, la deuxieme a ete reduite pour avoir 
toujours une largeur de 20 % du paragraphe qui la contient. Cette derniere montre l'avan- 
tage de l'utilisation d'un dimensionnement en pourcentage qui laisse l'image entiere- 
ment visible quelle que soit la taille de l'ecran du visiteur. En effet, une forte reduction de 
la taille de la fenetre du navigateur ne permettrait pas de voir la premiere image dans son 
integralite. 
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L' insertion d' images dans une fenetre entiere 
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Figure 4-2 

L' insertion d' images 
dans une fenetre 
reduite 
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Les images reactives 

Grace aux gestionnaires d'evenements onclick ou onfocus, il est possible de declencher 
un script JavaScript en reponse a Taction d'un visiteur. Cependant, ces evenements ont 
lieu quel que soit le point de l'image oil ils se produisent. Pour affiner ce comporte- 
ment, il est possible de creer une carte contenant la definition de plusieurs zones differen- 
tes de la meme image, chacune d'elles pouvant par exemple declencher un script 
different ou etre a Porigine d'un lien vers un autre document, comme nous le verrons au 
chapitre 5. Une telle carte contient la definition de toutes les zones sensibles de l'image. 
Une carte est definie a Paide de P element <map>. Ce dernier possede Pensemble des attri- 
buts communs. La presence de Pattribut id est obligatoire car e'est lui qui permet d'asso- 
cier la carte a une image a Paide de Pattribut usemap de Pelement <img />. La meme carte 
peut done servir pour plusieurs images differentes. L'element <map> doit contenir la defi- 
nition d'au moins une zone sensible. Chaque zone est creee par un element <area />. 

La definition d'une carte doit done avoir la structure suivante : 

<map id="cartel"> 
<! --Definition de la zone l 6re zone--> 
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<area alt="zonel" /> 
<!--Definition de la 2™ zone--> 
<area alt="zone2" /> 

</map> 

On constate que l'element <area /> est un element vide. La definition des zones se fait 
par 1' intermediate de certains de ses attributs dont voici la liste. 

• L'attribut accesskey : sa valeur est un caractere qui permet de creer un raccourci clavier 
(Alt + caractere sous Windows) simulant un clic sur la zone definie. 

• L'attribut alt : con tient un texte qui joue le meme role que dans l'element <img /> et 
il est egalement obligatoire. 

• L'attribut href : contient 1' URL du document cible qui sera affiche apres un clic sur la 
zone. II est facultatif car le concepteur peut vouloir qu'un clic sur la zone entraine une 
autre action, le declenchement d'un script par exemple. 

• L'attribut nohref : prend la valeur booleenne unique n oh ref pour definir explicitement 
que la zone sensible ne dirige pas vers un autre document. 

• L'attribut tabindex : sa valeur est un nombre entier qui donne une position a la zone 
sensible dans l'ordre de tabulation. Si par exemple nous ecrivons tabindex="2", il suffit 
a l'utilisateur de taper deux fois sur la touche Tab pour rendre la zone active. La frappe 
de la touche Entree equivaut alors a un clic sur la zone. 

• L'attribut shape : permet de definir la forme de la zone sensible. II peut prendre quatre 
valeurs : 

- rect pour un rectangle, qui est la valeur par defaut ; 

- ci rcl e pour un disque ; 

- poly pour un poly gone quelconque ; 

- default pour gerer les clics qui sont effectues en dehors d'une des zones sensibles 
definies sur l'image. 

• L'attribut coords : vient en complement du precedent pour indiquer les dimensions de 
la forme choisie. L'origine des coordonnees est le sommet superieur gauche de l'image, 
et celles-ci sont exprimees en pixel sans avoir a preciser l'unite px. 

- Si shape=" rect ", ilfaut indiquer dans cet ordre les coordonnees des sommets superieur 
gauche et inferieur droit du rectangle sous la forme : 

shape="rect" coords="X H ,Y H , X B Y B " 

- Si shape="ci rcl e", il faut indiquer les coordonnees du centre suivies du rayon sous 
la forme : 

shape="ci rcl e" coords="X c Y c R" 
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- Si shape="poly", il faut donner les coordonnees de tous les sommets dans l'ordre et 
terminer cette liste en repetant celles du point de depart. Pour un triangle, nous 
pouvons ecrire : 

shape="poly" coords="X lp Y lj X 2 Y z> X 3 Y 3 X lr Y t " 

L' element <area /> possede egalement deux attributs gestionnaires d'evenements par- 
ticuliers a partir desquels on peut gerer les actions du visiteur : 

• L'attribut onfocus : permet de gerer l'evenement qui se produit quand la zone 
sensible recoit le focus, ce qui peut se reproduire a l'aide de la souris ou en utilisant 
la touche Tab ou un raccourci clavier si les attributs tabindex ou accesskey ont ete 
definis. 

• L'attribut onbl ur : permet de gerer l'evenement qui se produit quand la zone perd le 
focus par les memes moyens. 

L'exemple 4-2 permet la realisation d'une image reactive. La creation de la carte a 
l'aide des elements <map> et <area /> amene a definir trois zones. La premiere est un 
rectangle (repere ©), la deuxieme un disque (repere ©) et la troisieme un poly gone 
(repere 0). 

La definition de l'attribut href declenche l'affichage d'une nouvelle page apres un clic 
sur la premiere zone. Pour la deuxieme zone, l'attribut nohref precise que le clic ne redi- 
rige pas vers une autre page. II provoque en revanche l'execution d'un script JavaScript 
(repere 0, ici une simple boite d'alerte). La definition de l'attribut onfocus pour la troi- 
sieme zone entraine l'affichage d'une boite d'alerte JavaScript quand elle recoit le focus 
(repere 0). La carte ainsi definie est utilisee par une image (repere 0) dont l'attribut 
usemap permet d'identifier l'element <map> concerne (repere 0). 



Exemple 4-2. Creation d'une image reactive 

<?xml version="l .0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Liens et image sensible</title> 

< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
</head> 
<body> 
<div> 

<hl>Les sites des regions</hl> 
<map id="regions"> 

<area href="http: //www. orleans.fr" alt="Region Centre" title="Region Centre" 
^» shape="rect" coords="142. 118,188, 180" />© 
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<area nohref="nohref " ©oncl ick="alert( 'Visitez la plus belle ville du monde')" 
alt="Region parisienne" title="Region parisienne" shape="ci rcl e" 
coords="180,98,16" />© 
<area href="http://www.nantes .fr" ©onfocus="alert( 'Nantes en plein 
^» developpement' )" alt="Pays de Loire" title="Pays de Loire" shape="poly" 

coords = "76,146, 95,110, 138,130. 94, 182, 76, 146" />© 
</map> 

<img 0usemap="#regions" src=". ./images/france.gif" alt="Carte des regions" 
width="344" height="336"/>© 

</div> 
</body> 
</html> 

La figure 4-3 montre le resultat obtenu et la forme du curseur au survol des liens pour la 
troisieme zone. 



Figure 4-3 

Une image reactive 
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Linsertion d'image en tant qu'objet 

Nous avons vu que les navigateurs ne supportent qu'un nombre limite de formats 
d'image. Si par exemple nous essayons d'inserer une image TIFF dans une page au 
moyen de l'element <img />, cette image ne sera pas affichee (comme nous l'avons vu a 
la figure 4-1). Pour pouvoir afficher un plus grand nombre de documents graphiques et 
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multimedias, le W3C a introduit depuis HTML 4 le nouvel element <ob j ect> qui peut etre 
inclus dans de nombreux autres elements de bloc ou en ligne. Le tableau 4-2 rappelle la 
liste des differentes valeurs possibles pour l'element <object>. 

Tableau 4-2. Les elements parents de <object> 

I '. 1 

a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, hi, h2, 

h3, h4, h5, h6, head, i, ins, kbd, label, legend, li, object, p, q, samp, small, span, strong, sub, sup, td, th, tt, var 



II peut contenir a son tour de nombreux elements dont la liste figure dans le tableau 4-3. 

Tableau 4-3. Les elements enfants de <object> 

i 1 

Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, dl, em, fieldset, 
form, hi , h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, object, ol, p, param, pre, q, samp, 
script, select, small, span, strong, sub, sup, table, textarea, tt, ul, var 

I I 

L'element le plus couramment employe dans <object> est l'element <param />, qui est un 
element vide et qui permet de passer a 1' application qui lit le fichier multimedia, et dont 
un certain nombre de parametres influencent la lecture. Ses parametres sont donnes sous 
la forme de paire nom/valeur dans les attributs name et value de l'element. En voici la 
forme generale : 

I <param name="nom_param" val ue="val eur_param"/> 

Les valeurs de ces parametres varient selon le type du fichier a lire. Pour une animation 
ou un fichier son que Ton veut lire en boucle, nous pouvons ecrire par exemple : 

j <param name="loop" val ue="true"/> 

Avant d'utiliser un tel parametre, il est bon de verifier s'il correspond bien a 1' application 
et s'il est bien accepte par les differents navigateurs. L'ajout d'un element <param /> inap- 
proprie bloque parfois la lecture du fichier dans certains navigateurs, tels qu' Internet 
Explorer ou meme Mozilla, alors meme que son absence permet la lecture correcte du 
fichier. 

Le contenu de l'element <object> quand il est differente de l'element <param /> ne sert 
que d'alternative en cas de non-affichage de l'objet multimedia et, normalement, n'est 
done pas visible. 

L'element <object> permet entre autres d'afficher des images et possede un grand nombre 
d'attributs. Nous n'allons utiliser ici que les attributs utiles a l'insertion d'image et nous 
recourons aux autres dans les sections suivantes consacrees a l'insertion de contenus 
multimedias. 

• Lattribut data : contient l'URL relatif ou absolu de l'image a afficher. C'est l'equivalent 
de l'attribut sre de l'element <img />. 
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• L'attribut type : precise le type MIME du fichier indique dans l'attribut data. 

• L'attribut standby : contient le texte qui est affiche pendant le temps de chargement de 
l'image. II equivaut a l'attribut alt de l'element <img />. 

• Les attributs width et height : permettent de definir les dimensions de l'objet dans la 
page, et en particulier celle d'une image. 

On retrouve egalement les attributs usemap et tabindex qui jouent le meme role que dans 
l'element <img />. En particulier l'attribut usemap permet de creer des zones reactives dans 
l'image. Dans l'exemple 4-3 nous incluons d'abord une image de type JPEG au moyen 
de l'element <object> aussi facilement qu'avec l'element <img /> (repere ©).Lecontenu 
de l'element <object> n'est pas visible et ne sert que de solution de substitution dans le 
cas oii l'image ne serait pas affichee. L' insertion d'une image de type TIFF, qui etait 
impossible avec <img />, devient alors possible avec <object> en precisant le type et les 
dimensions voulues pour l'image (repere ©). De meme, 1' insertion d'une image dans un 
format exotique pour le Web, puisqu'il s'agit de la meme image mais au format BMP, est 
aussi realisable en utilisant l'element <object> et en precisant encore le type et les dimen- 
sions du rendu desire (repere ©). La largeur de l'image est ici donnee en pourcentage. 

Exemple 4-3. Insertion d'images en tant qu'objet 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :1 ang="fr"> 
<head> 

<title>Les objets images</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 

</head> 

<body> 
<div> 
<!-- --> 

<object data=". ./images/xjrl300.jpg" id="imgl" width="400" height="350" 
k» title="yamaha XJR 1300">O 
<hl>Moto classe</hl> 
</object> 
<!-- --> 

<object data="romy.tif" id="img2" title="Romy" type="image/tiff " standby="Romy 
en tifs" width="400" hei ght="300" > © 
<hl>R0MY en format TIFF</hl> 
</object> 

<object data="romy.bmp" id="img3" title="Romy" type="image/bmp" standby="Romy 
+■ en tifs" width="30r height="350">© 
<hl>R0MY en format BMP</hl> 
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</object> 
</div> 
</body> 
</html> 



La figure 4-4 montre les images affichees dans le navigateur Mozilla. Pour realiser cet 
affichage, certains navigateurs peuvent necessiter l'emploi d'un plug-in comme Quick- 
Time ou Windows Media Player installes par defaut ou que l'utilisateur doit telecharger. 
II est toujours utile de creer un lien dans le site vers les sites des fabricants de ces plug- 
ins. 
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Figure 4-4 

Affichage d' images en tant qu'objets 



Image et bouton 

II est courant de rencontrer dans des pages web des images ayant l'apparence de bou- 
tons sur lesquels l'utilisateur peut cliquer pour declencher une action geree par un 
script (ecrit par exemple en JavaScript) execute cote client, ou par un script (ecrit par 
exemple en PHP) cote serveur. Ce type d'images implique la creation de deux images, 
l'une correspondant a l'etat initial du bouton et la seconde a l'etat du bouton quand 
l'utilisateur clique dessus. L' affichage successif de ces images en cas de clic cree un 
effet d'enfoncement du bouton. Pour creer le meme effet sans avoir recours a la crea- 
tion de plusieurs images, il existe l'element <button>, apparu en HTML 4. Cree pour 
etre utilise plus particulierement dans les formulaires (voir le chapitre 7), il peut etre 
incorpore en dehors de ce contexte pour declencher des scripts cote client. Comme il 
s'agit d'un element en ligne, il devra etre inclus dans un bloc <p> ou <di v> par exemple. 
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Pour que la face du bouton affiche une image, il suffit d'inclure un element <img /> 
dans l'element <button>. 

Le code de creation d'un bouton avec image a done la structure suivante : 

<button> 

<img alt="Texte" src="image.gif "/> 
</button> 

L'element <button> possede l'ensemble des attributs communs et par exemple le ges- 
tionnaire d'evenements onclick qui va nous permettre de declencher 1' execution d'un 
script a la suite d'un clic. Comme pour les elements <area>, nous retrouverons ici les 
attributs accesskey, tabindex, onblur et onfocus. L'attribut disabled qui prend la valeur 
booleenne unique disabled rend le bouton inactif. II ne sera utilise que pour rendre le 
bouton inactif a l'aide de code JavaScript apres une action particuliere d'un utilisateur. 
L'attribut type permet de determiner le role assigne au bouton. II peut prendre les 
valeurs button, submit ou reset, ces deux dernieres n'etant utiles que dans le cadre des 
formulaires. Quand il prend la valeur button, il n'a pas de role predetermine et e'est au 
concepteur de lui en donner un, en gerant les attributs gestionnaires d'evenements 
comme oncl i ck par exemple. 

L exemple 4-4 cree une page comportant deux boutons qui contiennent chacun une 
image (reperes Q et ©). et dont l'attribut type a la valeur button. Le premier bouton 
(repere ©) est reactif au clic par l'utilisation de l'attribut oncl i ck (repere ©) et affiche le 
nom du modele de la moto representee par l'image. Le second (repere 0) affiche une 
boite d'alerte JavaScript contenant la date et l'heure actuelle en reagissant a l'evenement 
onmouseover (repere ©) quand le curseur survole le bouton. Le style cree (repere O) permet 
de creer une couleur de fond pour le bouton. 

Exemple 4-4. Images et boutons 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :1 ang="fr"> 
<head> 

<title>Boutons et images</title> 
<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-l" /> 
<style type="text/css" > 

button {background-color: orange;}© 
</style> 
</head> 
<body> 

<div><h2>Images et boutons</h2> 

©<button type="button" ©oncl ick="alert( 'Modele: YAMAHA XJR 1300')"><br/> 
©<img src=" . ./images/xjrl300a. jpeg" width="200" hei ght="140" alt="Moto Yamaha"> 
</button><br/Xbr/> 
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©<button type="button" ©onmouseover="time=new Date();alert(time)"Xbr/> 
©<img src=" . . /images/horl oge. jpg" width="200" height="200" 

alt="La pendule'7Xbr/Xbr/> 
</button> 
</div> 
</body> 
</html> 



La figure 4-5 represente les boutons obtenus ainsi que la boite d'alerte creee par le survol 
du second bouton. 



Figure 4-5 
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L'insertion du multimedia 

Les images ne sont pas les seuls elements decoratifs d'une page web. A cet effet, nous 
disposons desormais de multiples elements multimedias qui vont des animations Flash a 
la video, en passant par les fichiers sons MP3 et les applets Java. Avec le langage 
XHTML, on peut incorporer ces fichiers multimedias de maniere conforme en oubliant 
les balises <embed> et <applet> desormais obsoletes. C'est l'element <object> qui se prete 
aujourd'hui le mieux a 1' inclusion de ces differents composants. 
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Notez bien cependant que la lecture des contenus multimedias par les navigateurs n'est 
pas une evidence comme celle du texte d'une page. II est souvent necessaire que ceux-ci 
soient munis de plug-ins specialises que le visiteur du site doit avoir installes au preala- 
ble, faute de quoi ils ne seront pas visibles ou audibles. Pour cette raison, il est bon de 
preciser dans la page les adresses de telechargement de ces plug-ins, tel que le site de 
Macromedia pour Macromedia Flash Player (http : //macromedi a . com/shockwave/downl oad/ 
downl oad . cgi ?Pl_Prod_Versi on=ShockwaveFl ash&promoi d=BI0X) ou QuickTime 
(http://www.apple.com/quicktime/download/win.html). 



L'insertion d'une animation Flash 

Pour incorporer une animation au format Flash, nous devons, comme le montre l'exem- 
ple 4-5, preciser l'adresse relative ou absolue du fichier Flash dont l'extension est .swf 
dans l'attribut data de l'element <object> (repere ©). Nous pouvons preciser le type 
MIME du fichier dans son attribut type (repere ©) ainsi que les dimensions de 1' anima- 
tion dans la page a l'aide des attributs width (repere ©) et height (repere ©). L'attribut 
standby (repere 0) peut egalement etre precise pour contenir un texte qui s'affiche pen- 
dant le temps de chargement du fichier si celui-ci semble devoir etre long pour le visiteur. 
Le titre <hl> (repere 0) n'est visible que si l'animation n'est pas lue par le navigateur. II 
pourrait etre complete par un lien vers le site de telechargement de Macromedia Flash 
Player. 

Exemple 4-5. Inclusion d'une animation Flash 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Objet Flash</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 

<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
</head> 
<body> 

<hl>0BJET FLASH</hl> 

<div> 

<object 0data="nav.swf " ti tl e=" FLASH " ©type="application/x-shockwave-flash" 
©width="880" ©height="165" standby="Menu en Flash"> 
<hl>0BJET FLASH NON AFFICHE</hl> 
</object> 
</div> 
</body> 
</html> 
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La figure 4-6 montre le resultat obtenu par 1' incorporation d'une superbe animation Flash 
du site www.portix.org qui sert de menu commun a ses pages. 
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Figure 4-6 

Incorporation d'une animation Flash 



L'insertion d'une video 

L'insertion d'une video dans une page est a distinguer de la lecture simple de ce type 
de fichier a l'aide d'un logiciel specialise, en dehors d'un navigateur, comme chacun 
peut le faire avec les ordinateurs recents apres le telechargement du fichier. II s'agit ici 
que la video soit visible a l'interieur meme de la page comme Test une image. Nous 
allons envisager successivement dans l'exemple 4-6 deux techniques qui necessitent 
l'emploi d'un plug-in externe, les tests ayant ete effectues avec QuickTime installe 
sur le poste client. 

La premiere methode est similaire a celle employee dans l'exemple precedent. Nous 
incluons encore un element <object> (repere Q) en precisant ses attributs data (repere ©) 
qui contient le nom du fichier video (ici de type MPEG mais pas necessairement), l'attri- 
but type (repere ©) qui donne le type MIME de ce fichier ainsi que les attributs width 
(repere ©) et height (repere 0) pour preciser les dimensions de la zone qui contient la 
fenetre de visualisation du plug-in. Cela ne veut pas dire que 1' image video prend les 
dimensions de cette fenetre, car contrairement aux images fixes, elle garde ses dimen- 
sions initiales determinees lors de sa creation. Cette methode simple fonctionne dans 
tous les navigateurs recents comme Explorer, Mozilla, FireFox Opera et Netscape, a cette 
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reserve pres que, pour fonctionner dans Explorer, il ne faut pas definir de parametres du 
type : 

<param name="autopl ay" value="true" /> 
<param name="loop" val ue="fal se" /> 

afin que, d'une part, la lecture de la video demarre tout de suite sans intervention du visiteur, 
et d' autre part qu'elle ne soit pas lue en boucle. 

La seconde methode utilise encore un element <object> (repere Q). Elle consiste a 
employer un controle ActiveX dont le code est indique dans l'attribut cl assi d (repere ©), 
l'attribut codebase, indiquant au navigateur l'adresse du code qui est cense lui permettre 
de visualiser le fichier, n'etant pas obligatoire. Les attributs width (repere 0) et height 
(repere ©) ont pour role de dimensionner la zone occupee par l'objet. Contrairement a la 
premiere methode, nous pouvons ici employer autant d'elements <param /> que souhaite 
pour agir sur la video. Le parametre nomme src donne l'adresse du fichier place ici dans 
le meme repertoire que le document XHTML (repere ©). Avec la valeur fal se (faux) le 
parametre autopl ay (repere ©) oblige le visiteur a commander lui-meme le demarrage de 
la video. Le parametre control 1 er (repere ©) avec la valeur true (vrai) permet d'afficher 
les boutons de commande de lecture, de pause et de rembobinage. Quant a celui nomme 
loop deja cite (repere ©), ayant la valeur false, il empeche la lecture en boucle. La 
seconde methode est acceptee par Explorer, Opera, mais pas par Mozilla ni FireFox. 

Les paragraphes (reperes et ©) inclus dans chacun de ces objets permettent un affi- 
chage alternatif en cas d' absence d'un plug-in adapte a la lecture de la video. lis contien- 
nent un conseil de telechargement (reperes © et ©) et un lien direct vers le fichier video 
que l'utilisateur peut alors visualiser plus facilement dans un lecteur multimedia externe. 

Exemple 4-6. Lecture d'une video 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Objet Video</title> 

<meta http-equi v="Content-type" content="text/html ; charset^i so-8859-1" /> 

<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
</head> 
<body> 

<hl>0BJET VIDE0</hl> 

<div> 

<!-Premiere methode--> 

O<object ©data="romy.mpg" title="Romy" ©type="video/mpeg" standby="Video 
MPEG" ©width="320" height="255"> 
0<p>OBJET VIDEO NON AFFICHE. Vous ne pouvez pas voir cette video : telechargez 
^» <a href="http://www. apple. com"X/a>QuickTime.<a href="romy.mpg">Voir la video 
^» dans votre 1 ecteur</a></p> 
</object> 
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<!-Seconde methode--> 

©<object ©classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase= 

"http://www.apple.com/qtactivex/qtplugin.cab" @width="320" height="255"> 
©<param name="src" value="romy.mpg"/> 
©<param name="autopl ay" val ue="fal se"/> 
©<param name="control ler" val ue="true"/> 
©<param name="l oop" val ue="fal se"/> 

©<p>0BJET VIDEO NON AFFICH E . <br /> Vous ne pouvez pas voir cette video : 

telechargez <a href="http://www. apple. com"X/a>QuickTime. <a href="romy .mpg"> 
<br />Voir la video dans votre lecteur habituel</a></p> 
</object> 
</div> 
</body> 
</html> 

La figure 4-7 montre le resultat obtenu dans Opera, dans lequel les deux objets video sont 
visibles simultanement. 
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L'insertion d'elements audio 

L' insertion de fichiers sonores dans une page se realise avec un element <object>, tout 
comme pour les videos, comme le montre l'exemple 4-7. Par rapport a l'exemple 4-6, 
nous modifions simplement les valeurs des attributs type, lesquels prennent la valeur 
audio/mp3 (repere Q) ou audio/mpeg et data, contenant le nom du fichier dont l'extension 
est .mp3 (repere ©). 
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Dans la seconde methode (repere ©), il suffit de modifier la valeur du parametre dont 
l'attribut name a pour valeur src (repere ©). Les attributs width (repere ©) et height 
(repere 0) de l'element <object> peuvent etre adaptes pour ne laisser visibles que les 
boutons de controle du lecteur dans la page. Pour diffuser ce type de fichier en musique 
de fond sans intervention possible du visiteur, il suffit de supprimer ces attributs dans la 
premiere methode ou de mettre le parametre nomme controller (repere ©) a la valeur 
fal se dans la seconde. 

Exemple 4-7. Lecture d'un fichier MP3 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :1 ang="fr"> 
<head> 

<title>Objet MP3</title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-l"> 
<style type="text/css" > 

/*object {position:absolute;top 20px} 
</style> 
</head> 
<body> 
<div> 

<hl>Lecture d'un fichier MP3 </hl> 

<!-- Premiere methode hei ght="40" width="300"--> 

<object ©type="audio/mp3" ©data="respire.mp3" id="mp3" standby="Respi re" 
title="Respire" hei ght="40" width="300"> 
<p>0BJET MP3 NON LU.<br /> Vous ne pouvez pas entendre ce son : telechargez 
<a href="http: //www. apple. com">QuickTime</a>. Ecouter <a href="respire.mp3"> 
"Respire" en MP3</aX/p> 
</object> 

<!-- Seconde methode width="300" height="40"--> 

©<object cl assi d= ' cl si d : 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B ' type="audi o/mp3" 
titl e="Respi re" codebase=' http://www.apple.com/qtactivex/qtpl ugin.cab' 
©width="300" ©height="40"> 
©<param name="src" value="respire.mp3" /> 
<param name="autopl ay" val ue="fal se" /> 
©<param name="control 1 er" value="true" /> 
<param name="loop" val ue="fal se" /> 

<p>0BJET MP3 NON LU.<br /> Vous ne pouvez pas entendre ce son : telechargez 
<a href="http: //www. apple. com">QuickTime</a>. Ecouter <a href="respire.mp3"> 
"Respire" en MP3</aX/p> 
</object> 
</div> 
</body> 
</html> 
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La figure 4-8 montre l'affichage obtenu dans Mozilla, navigateur qui ne reconnait pas la 
seconde methode. Dans ce cas, le contenu du paragraphe est affiche, et ainsi on peut cliquer 
sur le lien qui permet une lecture directe dans un logiciel comme Windows Media Player 
ou QuickTime. 
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Pour lire des fichiers sons de types differents, il faut simplement modifier les attributs 
type et data, en ecrivant par exemple : 

<object data="breeze.mid" type="audio/mid"> 
pour un fichier MIDI, ou encore : 

<object data="logo.wav" type="audio/wav"> 
pour un fichier WAV. 



L'insertion d'une applet Java 

Les applets sont de petits programmes ecrits en langage Java, qui peuvent s'executer 
dans une page web a condition bien sur que le poste client soit dote des moyens de les 
executer, en l'occurrence de la console Java de Sun ou d'un controle ActiveX appro- 
prie, et que ceux-ci soient actives dans le navigateur. Les taches realisees par ces 
applets sont des plus variees et on en trouve un tres grand nombre en telechargement 
gratuit sur Internet. 

Le code executable de 1' applet est contenu dans un ou plusieurs fichiers qui portent 
1' extension .cl ass et qui doivent etre presents sur le serveur en me me temps que la page 
XHTML qui les utilise. Pour inclure une applet, nous utilisons encore l'element <object> 
et non plus <applet>, desormais obsolete en XHTML. Lexemple 4-8 presente l'incorpo- 
ration d'une applet (due a Biel Giel nai.net, merci pour lui !) affichant une pendule a 
aiguilles munie d'une trotteuse en temps reel avec la date du jour en complement. 
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Comme Explorer d'un cote et les autres navigateurs (Mozilla, FireFox, Opera et Net- 
scape) de 1' autre ne traitent pas ces objets de la meme maniere, et surtout que ces metho- 
des sont incompatibles, nous avons recours dans l'exemple 4-8 a une astuce consistant a 
inclure deux elements <object> l'un dans 1' autre, chacun utilisant une methode differente. 

De cette maniere, l'applet est visible une seule fois dans tous les navigateurs. Pour les 
navigateurs autres que Explorer, dans le premier element <object> (repere ©). nous 
precisons le type de code dans l'attribut codetype (repere ©) et le nom du fichier Java 
dans l'attribut classic! (repere ©). Les attributs width (repere ©) et height (repere 0) 
precisent les dimensions de la zone de rendu de l'applet dans la page web. Generale - 
ment, chaque applet peut etre personnalisee selon les intentions de son createur en 
modifiant la valeur de certaines variables. Nous pouvons intervenir sur celles-ci par 
1' intermediate de l'element <param /> dont les attributs name et value correspondent 
respectivement aux noms des variables Java et a leur valeur. Les noms utilises figurent 
soit dans le code source Java s'il est livre avec l'applet, soit dans un fichier texte qui 
explique sa mise en oeuvre. 

Dans l'exemple 4-8 nous intervenons sur la couleur de fond (parametre bgcol or reperes © 
et ©), sur le texte qui s'afhche sur le cadran de la pendule (parametre 1 ogoStri ng, reperes © 
et ©) et sur le decalage horaire du lieu (parametre timezone, reperes © et ©). 

La methode a utiliser specifiquement pour Explorer fait appel a un module Java identifie dans 
l'attribut classid (repere ©), le nom du fichier Java etant indique dans le parametre 
nomme code (repere ©). Les autres parametres (reperes ©, © et ©) sont identiques 
aux precedents. L'utilisation dans l'exemple de couleurs de fond differentes pour les 
deux methodes permet simplement de verifier laquelle est employee par chaque navi- 
gateur. 

Exemple 4-8. Insertion d'une applet Java 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :1 ang="fr"> 
<head> 

<title>Applet Java</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 
</head> 
<body> 

<div> 

<hl>L'heure exacte</hl> 
<!-- Applet dans Netscape --> 

© <object © codetype="appl ication/java" © cl assid=" java :bi 1 1 sCl ock.cl ass" 
©width="400" ©height="400"> 
©<param name="bgcol or" val ue="00FF00"> 
<!-- couleur de fond hexa VERT --> 
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©<param name="logoString" val ue="XHTML"/> 
©<param name="timezone" value="-2"/> 
<!-- suite des parametres --> 

********************* 

<!--Applet dans Explorer--> 

<object ©classid="CLSID:8AD9C840-044E-HDl-B3E9-00805F499D93" width="400" 

height="400"> 
©<param name="code" value="billsClock.class"> 
©<param name="bgcol or" val ue="FF0000"> 
©<param name="logoString" val ue="XHTML"/> 
©<param name="timezone" value="-2"/> 
<!--suite des parametres --> 
</object> 
</object> 
</div> 
</body> 
</html> 



La figure 4-9 montre le resultat obtenu dans Explorer, mais il est identique dans les autres 
navigateurs, exception faite de la couleur de fond. 
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Exercices 

Exercice 1 : Quel type d' images peut-on inclure avec 1' element <img /> ? 

Exercice 2 : Dans quels cas et pourquoi a-t-on interet a choisir une image au format GIF 
plutot qu'au format JPEG ou PNG ? 

Exercice 3 : Quels sont les attributs indispensables dans 1' element <img /> ? 

Exercice 4 : Incluez une image JPEG dans un paragraphe tout en faisant en sorte qu'elle 
conserve ses dimensions initiales. 

Exercice 5 : Incluez une image GIF dans un titre en la dimensionnant a 50 % de sa taille 
normale. 

Exercice 6 : Creez une image reactive comprenant deux zones sensibles. La premiere, de 
forme circulaire, dirige vers un autre site, quelconque, et la seconde, qui est un penta- 
gone, permet l'affichage d'un message de bienvenue. Gerez les clics effectues en dehors 
de ces deux zones en affichant le message « Hors zone ». 

Exercice 7 : Affichez dans une division <div> une image de type TIFF, BMP ou autre 
format non courant sur le Web. Dimensionnez 1' image a 80 %. 

Exercice 8 : Creez un bouton dont la face est une image de votre choix. Le clic sur le 
bouton doit rediriger le visiteur vers le site www. fun html .com 

Exercice 9 : Recuperez ou fabriquez une animation Flash et incorporez-la dans un para- 
graphe. Creez un lien vers le site www.macromedia.com pour ceux qui ne peuvent pas la 
visualiser. 

Exercice 10 : Inserez une video dans un element <button> sans utiliser d'elements <param />. 

Exercice 11 : Inserez une video dans un element <button> en utilisant un controle ActiveX. 

Exercice 12 : Creez une musique de fond a l'aide d'un fichier WAV. 

Exercice 13 : Telechargez une applet Java et installez ses fichiers sur le serveur. Incluez 
ensuite cette applet dans une page en definissant ses parametres s'ils existent. 



5 



Creer des liens 



Dans l'acronyme XHTML, on peut considerer que l'element le plus important est le mot 
« Hypertext ». En effet, la creation de documents contenant des liens hypertextes est la 
particularite qui a rendu le Web si populaire. Les liens hypertextes permettent de passer, 
d'un simple clic, sur un mot ou sur une image, d'une page a l'autre, qu'elle soit situee sur 
le meme serveur ou en n'importe quel point du reseau. Nous parlerons dans ce cas de lien 
externe (sous-entendu au document initial). II est egalement possible de passer instanta- 
nement d'un point de la page a un autre situe dans la meme page et identifie par un nom 
particulier. Nous parlerons alors de lien interne (encore sous-entendu au document 
initial). Tout contenu essentiel d'une page XHTML peut faire l'objet d'un lien hypertexte 
externe ou interne. Si l'origine d'un lien est tres souvent un clic sur une partie d'un texte, 
nous pourrons tout aussi bien definir celle-ci sur une image, une partie donnee d'une 
image, un bouton ou encore creer cette redirection en utilisant un script JavaScript en 
reaction a d'autres evenements que le traditionnel clic. Enfin, nous allons voir qu'un lien 
peut meme permettre de declencher 1' execution d'un script ou l'ouverture automatique 
de la messagerie electronique du visiteur pour envoyer un e-mail vers le site ou a 
1' attention de tout autre destinataire. 



Les liens a partir d'un texte 

L'element XHTML primordial pour la creation de liens est l'element <a>, dont le contenu, 
situe entre les balises <a> et </a>, est la partie visible, texte ou image, sensible au clic. Ses 
attributs permettent de definir la cible du lien et les moyens de le declencher. Comme il 
s'agit d'un element en ligne, il doit etre inclus dans un bloc ou tout autre element admettant 
comme contenu cet element. II peut done etre inclus quasiment en tout point d'une page, aussi 
bien dans un bloc <div> ou <p> que dans une liste, une cellule de tableau ou un formulaire. 
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Les tableaux 5-1 et 5-2 donnent respectivement la liste des elements parents et enfants 
de 1' element <a>, auxquels il faut se conformer pour creer un document conforme 
XHTML 1.1. 

Tableau 5-1. Elements parents de I'element <a> 

i 1 

abbr | acronym | address | b | bdo | big | caption | cite | code | dd | del | dfn| div | dt | em | fieldset | hi | h2 | 
h3 | h4 | h5 | h6 | i | ins | kbd | label | legend | li | object | p | pre | q | samp | small | span | strong | sub | sup 
| td | th | tt | var 

I I 

Tableau 5-2. Elements enfants de I'element <a> 

i 1 

Texte | abbr | acronym | b | bdo | big | br | button | cite | code | del | dfn |em | i | img | input | ins | kbd | label | 
map | object | q | samp | script | select | small | span | strong | sub | sup | textarea | tt | var 

Quand nous definissons un lien dont l'origine est par exemple un texte, celui-ci apparait 
souligne, dans une couleur particuliere definie par defaut dans le navigate ur (generale- 
ment en bleu), et le curseur prend l'aspect d'une main pour signaler l'existence de ce 
lien. Ces conventions visuelles sont communes a tous les navigateurs et, meme s'il est 
possible de les modifier a loisir avec des styles CSS comme nous le verrons au chapitre 12, 
il faut en user moderement, plus particulierement pour le soulignement et l'aspect du 
curseur, car les internautes sont habitues a ces conventions bien etablies. 

Les liens externes 

Les liens externes permettent de diriger le visiteur vers de nouveaux documents non 
contenus dans la page d'origine. II peut s'agir de types de fichiers tres divers. Les liens 
les plus usuels permettent de visualiser des documents courants directement dans le navi- 
gateur, tels que des pages XHTML ou des images. Mais il est possible de definir des liens 
vers des documents de type tres divers comme des documents PDF, des fichiers compres- 
ses selon des formats divers comme ZIP, des animations Flash, des videos, des fichiers 
sons MP3 ou des fichiers MIDI. 

Les liens vers des documents courants 

Pour indiquer l'adresse URL de la cible d'un lien, il faut donner une valeur a l'attribut 
href de I'element <a>. Cette adresse peut etre relative comme dans le code suivant : 

<p>La page <a href= "pagecss.html" > CSS 2 </a></p> 

Dans ce cas, l'aspect du texte est tel que celui represents a la figure 5-1 et le document 
pagecss . html doit se trouver sur le serveur, dans le meme dossier que la page en cours qui 
contient le lien. Dans le cas contraire, vous exposez les visiteurs a l'affichage de la page 
maudite des webmestres, nommee « Erreur 404 ». 
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L adresse de la page cible peut aussi etre absolue comme dans le code suivant : 

<div>Visitez le site du <a href= "http://www.w3.org" >W3C </a></div> 

L' element <a> possede 1' ensemble des attributs communs parmi lesquels nous noterons 
particulierement id qui nous permet d' identifier le lien pour agir sur son contenu a l'aide 
d'un script JavaScript (voir l'exemple 5-1). L'attribut titl e doit etre defini systematique- 
ment car il est utile pour afficher un bref message permettant d'expliquer le contenu de la 
page cible du lien. De plus, il sera lu par les navigateurs oraux destines aux non-voyants, 
ce qui ameliore 1' accessibilite du site. N'oublions pas non plus l'attribut cl ass qui permet 
d'appliquer des styles specifiques aux liens (voir le chapitre 12, Le style du texte et des 
liens). En plus de ces attributs communs, l'element <a> possede un grand nombre d'attri- 
buts particuliers dont les definitions sont les suivantes : 

• access key : il permet de creer un raccourci clavier pour ouvrir le document cible sans 
effectuer de clic sur le contenu de l'element <a>. Sa valeur doit etre un caractere spe- 
cifique, de preference une lettre. L'utilisateur accede alors a la cible en tapant le rac- 
courci Alt+caractere. Cette possibilite doit etre signalee au visiteur, soit en clair par 
un texte explicatif, soit en soulignant le caractere choisi, generalement dans un des 
mots du lien, comme le font les menus de nombreux logiciels. II faut veiller a ne pas 
utiliser les memes raccourcis que ceux qui existent dans les navigateurs (comme 
Alt+F par exemple qui ouvre le menu Fichier) car ils agiraient sur le navigateur et 
non sur le lien. 

Exemple de code : 

<div>Visitez le site du <a href= "http://www.w3.org" accesskey="W" 
title="W3C:raccourci Alt+W">W3C </a></div> 

• tabindex : il definit un ordre d'acces au lien avec une tabulation, ce qui rend le lien 
actif si la page en comporte plusieurs. En ecrivant le code suivant, il faudra que l'utili- 
sateur tape deux fois sur la touche Tab pour rendre le lien actif, la redirection vers la 
page cible se faisant ensuite avec la touche Entree : 

<p>Les standards<a href="page2.html " tabindex="2">W3C</a></p> 

• charset : il contient le code d'un jeu de caracteres du type ISO-8859-1 (Latin 1) pour 
indiquer celui qui est utilise dans le document cible. Nous ne l'utiliserons que si la 
cible est ecrite par exemple dans un alphabet different de celui de la page d'origine du 
lien. 

• type : il indique si besoin est le type MIME du document cible. Nous l'utilisons uni- 
quement si la cible n'est pas un document XHTML comme une image, un fichier son, 
video ou un document PDF ou ZIP. Son utilisation permet de fournir au navigateur une 
information sur la maniere d' afficher la cible, ce qui accelere son apparition. Nous 
pouvons ecrire par exemple : 

<li><a href="mapomme.tif " type="image/ti ff ">Ma photo</aX/l i> 
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• href 1 ang : il precise le code de langue du document cible s'il est different de celui du 
document initial tel qu'il est indique par l'attribut xml :lang precise par exemple dans 
l'element <body>. 

• rel : il donne la relation de dependance existant entre le document d'origine et le 
document cible. Cet attribut a deja ete utilise dans l'element <1 ink>, et il peut prendre 
par exemple les valeurs index, next ou prev. 

• rev : cet attribut indique la relation inverse du precedent, et done le rapport existant 
entre le document cible et celui qui l'a appele. II prend le meme type de valeurs que 
rel . 

• shape : par defaut, toute la zone occupee a l'ecran par le contenu de l'element <a> est 
sensible au clic de l'utilisateur pour provoquer l'affichage de la cible. Cette situation 
peut etre modifiee pour qu'une partie seulement du contenu soit sensible au clic. Cette 
possibility est principalement utilisee quand le contenu est une image. L'attribut shape 
permet de definir la forme de cette zone. II peut prendre l'une des valeurs suivantes : 

- rect pour un rectangle, e'est la valeur par defaut. 

- ci rel e pour un disque. 

- poly pour un poly gone. 

- default pour definir une adresse cible en cas de clic sur un emplacement situe en 
dehors des zones definies par les formes precedentes. 

II faut ensuite definir les coordonnees des points cles permettant de dessiner la forme 
choisie, a l'aide de l'attribut coords. 

• coords : il contient une suite de nombres qui sont les coordonnees de ces points cles. 
L'origine des coordonnees est Tangle superieur gauche de la zone de contenu de l'element 
<a>. Pour chaque forme, il faut definir les coordonnees suivantes : 

- si shape="rect", nous devons donner dans cet ordre les coordonnees des sommets 
superieur gauche et inferieur droit du rectangle. Par exemple : 

<p><a href="meteo.fr" shape="rect" coords="50,20,100,60"> <img src="carte.gif " 
| al t="rectangl e a cliquer" />Choix de la region</aX/p> 

- si shape="ci rel e", nous devons donner dans cet ordre les coordonnees du centre suivies 
du rayon. Par exemple : 

<p><a href="meteo.fr" shape="ci rel e" coords="100,150,50"> <img src="carte.gif " 
j alt="cercle a cliquer" />Choix de la region</aX/p> 

- si shape="poly", nous devons donner les coordonnees de tous les sommets du poly- 
gone suivies des coordonnees du point de depart pour refermer la figure. 

<p><a href="meteo.fr" shape="poly" coords="50, 100,150, 100, 80, 200, 50, 100"> 
<img src="carte.gif " alt="Triangle a cliquer" />Choix de la region</aX/p> 
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Enfin, comme les autres elements visuels pouvant recevoir le focus, l'element <a> 
possede les attributs de gestion d'evenements onfocus quand son contenu recoit le 
focus (done par defaut encadre par une bordure en pointilles), et onbl ur quand il perd 
le focus. Nous pouvons gerer ces evenements en ecrivant par exemple le code 
suivant : 

<p>Le site du <a href="w3.org" onfocus="al ert( 'Ne manquez pas le site du W3C')"> 
W3C</aX/p> 

Signalons enfin que l'utilisation des gestionnaires d'evenements communs onmouseover et 
onmouseout peut se reveler interessante pour les liens en permettant la creation d'effets 
graphiques attrayants. En les associant a la methode getElementByldO, nous pouvons 
modifier le style du contenu de l'element <a> quand le curseur survole ou quitte sa zone 
de contenu. En ecrivant le code ci-apres : 

<p>Le site du <a id="lienl" href="http://w3.org" 

onmouseover="getEl ementById( '1 ienl ' ) . styl e.col or=' red' " 
onmouseout="getElementById( ' 1 ienl ' ) . styl e.col or='bl ack' ">W3C</aX/p> 

le texte du lien devient rouge quand le curseur le survole, et noir quand il le quitte. 

L' exemple 5-1 realise la mise en ceuvre des differents types de liens que nous venons 
d'envisager. Le premier cree un lien vers le site du W3C et utilise l'attribut onfocus 
pour afficher une boite de dialogue (repere ©). Le deuxieme lien definit les attributs 
accesskey, tabindex et title pour augmenter l'accessibilite (repere ©). Le troisieme 
lien utilise les attributs onmouseover et onmouseout pour modifier le style du lien (repere ©). 
Le suivant est effectue vers une image de type JPG qui s'affichera dans une nouvelle 
page (repere ©). Le dernier est effectue vers un document au format texte brut qui 
s'affiche tel quel dans une nouvelle page (repere 0). Notons que, dans ces deux der- 
niers cas, le contenu cible est affiche dans le navigateur mais il ne s'agit pas d'un 
document XHTML. Cela peut etre verifie en tentant d' afficher le code source de la 
page cible. 

Exemple 5-1 . Divers types de liens courants 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<ti tl e>Li ens vers des cibles diverses</title> 

<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
</head> 
<body> 

<!-- Documents XHTML --> 
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<p>Le site du <a id="lienl" href="http://w3.org" 

onfocus="al ert( 'Ne manquez pas le site du W3C )">W3C</aX/p>0 

<p>Le site du <a id="lien2" href="http://w3.org/TR/xhtmlH" accesskey="A" 
tabindex="2" title="Référence XHTML 1.1 (Alt+A)"> 
XHTML 1.1 </aX/p>© 

<p>Le site du <a id="lien3" href="http: //www. w3.org/TR/CSS21/" 
onmouseover="getEl ementByldt '1 ien3' ) . styl e.col or=' red' " 
onmouseout="getEl ementByldt '1 ien3' ) .styl e. color= 'bl ack' ">CSS 2.1</aX/p>© 

<!-- Image JPEG --> 

<p>La photo de la <a id="lien4" 

href="http://www.funhtml .com/php5/couverture_PHP5. jpg" accesskey="E" 
tabindex="5" title="Couverture du livre (Al t+E) ">couverture du 1 i vre</aX/p>© 

<!-- DocumentTexte--> 

<p>La bible en <a id="lien5" href="latin.txt" accesskey="G" tabindex="5" 
title="Couverture du livre (Alt+G)"> latin </a>(Au format texte)</p>0 
</body> 
</html> 

La figure 5-1 montre le resultat obtenu dans la page. 
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Les liens vers des documents particuliers 

Quand leur attribut href pointe vers certains documents de types particuliers, les liens 
entrainent le demarrage de plug-ins specialises, propres au navigateur, ou de logiciels 
exterieurs qui lisent ces documents. L'exemple 5-2 contient de nombreux liens vers des 
documents tres varies. La lecture de chacun d'eux fait appel a des modules ou des appli- 
cations externes en general non installes par defaut sur les ordinateurs. 
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Exemple 5-2. Les liens vers des documents particuliers 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<ti tl e>Li ens vers des documents multimedia</title> 

<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
</head> 
<body> 
<!-- Document PDF --> 
<p>La documentation CSS 2.1 au format 

<a id="lien4" href="http://www. w3.org/TR/CSS21/css2.pdf" accesskey="A" 
tabindex="3" type="appl ication/pdf " title="Référence CSS 2.1 
(Alt+A)">PDF</aX/p>© 
<!-- Document Word --> 

<p>La bible en <a id="lien7" href="latin.doc" accesskey="B" tabindex="7" 
type="appl ication/msword" title="Bible en latin (Alt+B)"> latin </a> 
(Au format Word)</p>© 
<!-- Flash --> 

<p>Lire une animation <a id="lien8" href="lettres.swf " accesskey="D" tabindex="8" 

title="Animation Flash (Alt+D)"> Fl ash</aX/p>© 
<!-- Video MPEG --> 

<p>Lire une Video <a id="lien9" href="romy.mpg" accesskey="G" tabindex="9" 

type="video/mpeg" title="Romy la Star (Alt+G)"> MPEG</aX/p>© 
<!-- MP3 --> 

<p>Lire un fichier son au format<a id="lienlO" href="respi re.mp3" accesskey="H" 

tabindex="10" title="Mickey 3D: Respire (Alt+H)"> MP3</aX/p>© 
<!-- MIDI --> 

<p>Lire un fichier son au format<a id="lienll" href="breeze.mid" accesskey="J" 
tabindex="10" type="appl ication/" title="Son mi di (Alt+J)"> MIDK/aX/p>© 
<!-- Image TIFF --> 
<p>Lire une image au format<a id="lienl2" href="romy .tif " accesskey="R" 
tabindex="10" type="image/tiff " title="Romy (Alt+R)"> TIFF</aX/p>© 
<!-- Son WAV --> 

<p>Lire un son au format<a id="lienl2" href="cigales.wav" accesskey="S" 

tabindex="10" type="audio/x-wav" title="Le chant des cigales (Alt+S)"> WAV</a> 
</p>© 
</body> 
</html> 

Le premier lien est effectue vers un document PDF qui entraine le demarrage du module 
specialise Acrobat Reader (repere ©). Le chargement de ce module (qui prend un temps 
assez long dans sa version 6, auquel il faut ajouter ensuite le temps de telechargement du 
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fichier PDF lui-meme) permet au navigate ur de lire et d'afficher le document. Une nou- 
velle barre d'outils apparait alors dans le navigate ur. Elle permet de naviguer aisement 
dans le document. La figure 5-2 montre 1' aspect de la fenetre obtenue. 
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Figure 5-2 

Visualisation d'un document PDF 



Le deuxieme lien est effectue vers un document Word (repere ©). L' activation de ce lien 
provoque 1' apparition d'une fenetre semblable a celle de la figure 5-3, qui demande au 
visiteur de choisir le programme a utiliser pour ouvrir le document, en suggerant une 
application. Si le visiteur clique sur la case a cocher de la derniere ligne, lors de son 
ouverture, le navigateur ouvre toujours la meme application pour les fichiers Word sans 
afficher cette fenetre de choix. 

Le troisieme lien dirige vers une animation Flash (repere ©) qui est affichee dans une 
nouvelle page vide. II faut cependant que le navigateur client soit muni du module de 
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Figure 5-3 

Visualisation d'un 
document Word 



□uverture latin.doc 



Le fichier k latin.doc * est de type application/ms'A'ord [Document Microsoft 
Word] et Mozilla ne sait pas comment traiter ce type de fichier, Ce fichier se 
trouve a : 

http:// , A l v-. l, A l , tijnhtml.com/xhtml/C5/ 
Qu'est-ce que Mozilla doit faire de ce fichier ? 
0|L'ouvrir avec T^pIitaBon par defiaut frVord) t : 
O L'ouvrir avec f " 



O L'enregistrer sur le disque 

^] Pour ce type de fichier, toujours effectuer cette action 



Annuler 



lecture adequat. II est conseille en regie generale de proposer un lien vers le site de tele- 
chargement des plug-ins Flash (http://sdc.shockwave.com/shockwave/download/) pour 
ceux qui n'en disposeraient pas encore. 

Les cinq liens suivants pointent vers des documents multimedias video et sonores (repe- 
res O, 0, ©, Q et ©). Leur activation va declencher le demarrage d'une application 
externe comme le lecteur Windows Media ou Quick Time selon la configuration du poste 
client. La figure 5-4 montre la fenetre de l'application Windows Media ouverte d'un clic 
sur le lien MP3. 



Figure 5-4 

Le lecteur Windows 
Media 




I Le langage XHTML 
I Partie I 

Les liens cibles : les ancres 

Quand le contenu d'une page est volumineux, l'utilisateur ne peut pas en avoir une vision 
globale. II est alors souhaitable de lui proposer une table des matieres ou un menu com- 
pose de liens internes vers les differentes sections de la page. II pourra ainsi acceder 
directement au point de son choix sans faire defiler la page. De meme, si le lien est 
externe, il est possible d' acceder en un point particulier de la page cible. Chaque point 
cible de la page doit etre signale par un lien particulier, appele ancre nommee, lequel est 
cree a l'aide de l'element <a>, muni simplement d'un attribut id dont la valeur doit etre 
unique dans la page. Notons que 1' ancre peut aussi se trouver dans un autre document. 
L' attribut href ne doit pas necessairement etre utilise dans une ancre car celle-ci peut 
n'etre que la cible du lien. Nous pouvons par exemple ecrire le code suivant pour le 
contenu d'une page : 

<p><a id="paral">Paragraphe K/a>Un document XHTML doit avoir la structure...</p> 
<p><a id="para2">Paragraphe 2</a>Une feuille de style CSS comporte...</p> 

Chaque paragraphe devient alors la cible d'un lien. Nous devons ensuite creer le lien 
d'origine pour lequel un clic permet l'africhage du paragraphe cible en haut de la fenetre 
du navigateur. L'element <a> origine du lien doit contenir un attribut href dont la valeur 
est celle de 1' attribut id de la cible, precede du caractere diese (#). Nous disposons par 
exemple du code suivant pour creer le lien vers le premier paragraphe : 

<p><a href="#paral">Vers le paragraphe K/aX/p> 

Si l'ancre est situee dans un autre document XHTML, l'attribut href contient l'adresse 
relative ou absolue du document, suivie du caractere diese, puis de l'identifiant de 
l'ancre. Pour une adresse relative, nous pouvons ecrire : 

<p><a href="page2.html#paral">Paragraphe K/aX/p> 

Et, pour une adresse absolue, le code suivant : 

<p><a href="http: //www. f unhtml .com/page2.html#paral">Paragraphe K/aX/p> 

Pour creer un menu sous forme de liste, situe en haut de la page, et qui permet d' acceder 
directement a chaque partie de la page, nous pouvons ecrire le code suivant : 



Pour permettre des allers et retours rapides entre les liens origines et les ancres cibles, il 
faut utiliser conjointement les attributs href et i d dans chacun des elements <a>. En repre- 
nant 1' exemple de notre menu, nous aurions le code de 1' exemple 5-2 qui, a partir d'un 
menu contenant trois liens (reperes ©. et ©X permet l'acces aux differentes sections 
du texte contenu dans des elements <div> (reperes ©, © et ©). Avec les ancres qui 
possedent un attribut href (reperes ©, © et ©), on peut revenir au menu a partir des diffe- 
rents paragraphes. 




<ul> 

<li><a href="#sujetl"> XHTML</aX/l i> 

<li><a href="#sujet2"> CSS</aX/li> 

<li><a href="#sujet3"> JavaScript</aX/l i> 
</ul> 
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Exemple 5-3. Systeme de navigation dans une page unique 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les ancres</titl e> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<hl>Vos sujets preferes</hl> 
<ul> 

<li><a href="#sujetl" id="menul"> XHTML</aX/l i>© 
<li><a href="#sujet2" id="menu2"> CSS</aX/li>© 
<li><a href="#sujet3" id="menu3"> JavaScript</aX/li>© 

</ul> 
<hr /> 

<!-- Premiere section --> 
<div>© 

<hl>XHTML</hl><a id="sujetl" href="#menul">Retour au vers le menu</aXbr />© 

Quand le contenu d'une page est assez long, 1 ' uti 1 i sateur ne peut pas en avoir une 
vision globale. II est alors possible de lui proposer une table des matieres ou 
un menu compose de liens vers les differentes sections de la page. II pourra 
alors acceder directement au point qui lui convient sans avoir a faire defiler 
la page... </div><br /Xhr /> 

<!-- Deuxieme section --> 

<div>© 

<hl>CSS</hl><a id="sujet2" href="#menu2">Retour au vers le menu</a><br />Q 

Quand le contenu d'une page est assez long, 1 ' uti 1 i sateur ne peut pas en avoir une 
vision globale. II est alors possible de lui proposer une table des matieres ou 
un menu compose de liens vers les differentes sections de la page. II pourra 
alors acceder directement au point qui lui convient sans avoir a faire defiler 
la page...</div><br /Xhr /> 

<!-- Troisieme section --> 

<div>© 

<hl>JavaScript</hl><a id="sujet3" href="#menu3">Retour au vers le menu</a><br />© 

Quand le contenu d'une page est assez long, 1 ' uti 1 i sateur ne peut pas en avoir une 
vision globale. II est alors possible de lui proposer une table des matieres ou 
un menu compose de liens vers les differentes sections de la page. II pourra 
alors acceder directement au point qui lui convient sans avoir a faire defiler 
la page... </div><br /Xhr /> 

</body> 

</html> 
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La figure 5-5 donne l'aspect de la page obtenue avec des paragraphes courts pour alleger 
le code, mais ce systeme convient bien evidemment a des textes longs. 
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Figure 5-5 

Navigation dans une page unique 



Chacun des liens de cette page est done l'origine d'un lien interne vers une ancre nom- 
inee - par exemple le lien nomme « XHTML » (repere O) conduit au premier paragraphe 
identifie par l'attribut id de valeur sujetl (repere 0) - mais, reciproquement, le lien 
nomme « sujetl » (repere 0) permet de remonter au menu « XHTML » identifie par 
l'attribut i d de valeur menul (repere et done de le reafficher si la page est trap longue. 
De meme, le lien nomme « CSS » du menu (repere Q) conduit au deuxieme paragraphe 
(repere 0) et le lien nomme « JavaScript » (repere ©) mene au troisieme paragraphe 
(repere 0). Reciproquement, les liens incorpores dans chaque division permettent de 
remonter au menu en tete de page. 



Emplacement des attributs id 

Pour permettre le retour a I'ensemble du menu, court ici, il est egalement possible de supprimer les 
attributs 1 d de chacun des liens de la liste <ul > et de definir un seul attribut i d pour cet element <ul > 
avec la valeur menu. Tous les liens situes dans les differents paragraphes ont alors un attribut href 
ayant la valeur #menu. lis conduisent alors tous au meme point de la page. 
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L'exemple 5-4 permet d'illustrer les possibilites offertes en creant un systeme de naviga- 
tion complet entre trois pages du meme site. La page d'accueil nommee index5-4.html 
affiche un menu permettant d'acceder directement aux differents chapitres des pages 
nominees xhtml .html et ess. html. Chacune de ces pages comporte egalement le meme 
menu, ce qui permet une navigation croisee entre toutes les pages sans utiliser le bouton 
Precedent du navigateur pour revenir a la page d'accueil, et egalement d'atteindre 
n'importe quel chapitre de n'importe quelle page. 

Exemple 5-4. Un systeme de navigation entre plusieurs pages 

Le fichier index5-4.html 

La page d'accueil contient deux titres de niveau 1 (reperes Q et 0) qui contiennent cha- 
cun trois liens (reperes 0, et ©) vers les chapitres 1, 2 et 3 situes dans les pages 
xhtml . html et ess . html (reperes 0, Q et ©). Chacun de ces chapitres est contenu dans un 
paragraphe des pages cibles. 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Navigation entre plusieurs pages</title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<hl id="menuxhtml">XHTML O 

<a href="xhtml .html#chapl"> Chapitre 1 </a> ** 
<a href="xhtml . html#chap2"> Chapitre 2 </a> ** @ 
<a href="xhtml . html#chap3"> Chapitre 3 </a> Q 
</hl><hr /> 

<hl id="menucss">CSS 2 

<a href="css.html#chapl"> Chapitre 1 </a> ** 
<a href="css.html#chap2"> Chapitre 2 </a> ** 
<a href="css.html#chap3"> Chapitre 3 </a> 
</hl><hr /> 
</body> 
</html> 

Le fichier xhtml.html 

Les pages xhtml .html et ess. html ont une structure identique. On y retrouve le meme 
menu que dans la page d'accueil (reperes et 0), auquel s'ajoute un lien vers le 
menu general de la page d'accueil (repere 0). Chaque page contient ensuite trois 
paragraphes correspondant aux trois chapitres de chaque sujet (reperes 0, et 0). 
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Pour faciliter la navigation, chaque chapitre renferme par ailleurs un lien vers le menu de 
sa propre page (reperes ©. © et ©). 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>La page de XHTML l.K/title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<link rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<hl id="menuxhtml">XHTML © 

<a href="xhtml .html#chapl"> Chapitre 1 </a> ** 

<a href="xhtml . html#chap2"> Chapitre 2 </a> ** 

<a href="xhtml . html#chap3"> Chapitre 3 </a> 
</hl><hr /> 

<hl id="menucss">CSS 2 © 

<a href="css . html#chapl"> Chapitre 1 </a> ** 

<a href="css.html#chap2"> Chapitre 2 </a> ** 

<a href="css . html#chap3"> Chapitre 3 </a> 
</hl><hr /> 
<hl> 

<a href="index5-3.html#menuxhtml "> Accueil </a> © 
</hl><hr /> 
<!-- Contenu de la page --> 
<h2>Chapitre 1: Introduction</h2>© 
<p><a i d = " c h a p 1 " href="#menuxhtml ">Menu</a>© <br /> 
Pourquoi utiliser XHTML. ..In principio creavit Deus caelum et terrain terra autem 
erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei 
ferebatur super aquas dixitque Deus fiat lux et facta est lux </p> 
<h2>Chapitre 2: La structure</h2>© 
<p><a id="chap2" href="#menuxhtml ">Menu</a>© <br /> 
La structure d'un document XHTML... In principio creavit Deus caelum et terrain 
terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus 
Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux 

</p> 

<h2>Chapitre 3: Le texte</h2>© 
<p><a id="chap3" href="#menuxhtml ">Menu</a>© <br /> 
Pour structurer le texte...In principio creavit Deus caelum et terram terra 
autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei 
ferebatur super aquas dixitque Deus fiat lux et facta est lux 

</p> 
</body> 
</html> 
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Le fichier ess. html 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>La page de XHTML l.K/title> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<hl id="menuxhtml">XHTML O 

<a href="xhtml . html#chapl"> Chapitre 1 </a> ** 

<a href="xhtml . html#chap2"> Chapitre 2 </a> ** 

<a href="xhtml . html#chap3"> Chapitre 3 </a> 
</hl><hr /> 

<hl id="menucss">CSS 2 Q 

<a href="css.html#chapl"> Chapitre 1 </a> ** 

<a href="css.html#chap2"> Chapitre 2 </a> ** 

<a href="css.html#chap3"> Chapitre 3 </a> 
</hl><hr /> 
<hl> 

<a href="index5-3.html#menuxhtml "> Accueil </a> Q 
</hl><hr /> 
<!-- Contenu de la page --> 
<h2>Chapitre 1: Introduction a CSS</h2> O 

<p><a id="chapl" href="#menuxhtml ">Menu</a>©<br />Pourquoi utiliser CSS 2... 
^» In principio creavit Deus caelum et terram terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
^» dixitque Deus fiat lux et facta est lux 

</p> 

<h2>Chapitre 2: Les selecteurs CSS</h2> 

<p><a id="chap2" href="#menuxhtml ">Menu</a>©<br />Les selecteurs CSS... 
^» In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
^» et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
^» dixitque Deus fiat lux et facta est lux 

</p> 

<h2>Chapitre 3: Creer des styles</h2> © 

<p><a id="chap3" href="#menuxhtml ">Menu</a>©<br />Creer des styles... 
^» In principio creavit Deus caelum et terram terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
^» dixitque Deus fiat lux et facta est lux 
</p> 
</body> 
</html> 
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Ce systeme complet permet done en chaque point de n'importe quelle page d'acceder 
rapidement aux autres points des differentes pages du site. Les figures 5-6 et 5-7 mon- 
trent respectivement le menu de la page d'accueil et la page xhtml . html (la page ess . html 
a le meme aspect). 
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La page du XHTML 
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Liens a partir d'elements graphiques 

Lien a partir d'une image ou d'un bouton 

Le contenu de l'element <a>, s'il est generalement compose de texte, peut egalement 
inclure des elements graphiques, tels que des images, des boutons ou des contenus multi- 
medias (voir le tableau 5-2). 

On utilise les boutons comme origine de lien en incorporant un element <button> entre les 
balises <a> et </a>. L'attribut type de l'element <button> doit avoir la valeur button, et le 
contenu de cet element est le texte visible sur le bouton. C'est l'attribut href de <a> qui, 
comme precedemment, donne l'adresse du document cible du lien. 

L'exemple 5-4 cree un ensemble de boutons utilises comme declencheur de liens vers des 
sites externes. Le code de l'exemple 5-4 fonctionne parfaitement dans les navigateurs les 
plus avances (Mozilla, FireFox, Netscape) mais dans Internet Explorer (meme avec la 
version 6) les boutons ne reagissent pas au clic. Pour pallier ce souci de conformite, il 
faut ajouter les gestionnaires d'evenements onclick de l'element <button> de la maniere 
suivante, en appelant la propriete JavaScript wi ndow . 1 ocati on, dont la valeur est l'adresse 
de la page vers laquelle le visiteur va etre redirige, c'est-a-dire la meme valeur que celle 
de l'attribut href de l'element <a> : 

<button type="button" oncl ick="window. location = 'http://www.w3.org/TR/xhtmlll'"> 
| W XHTML </button> 

Le premier lien (repere O) utilise ce code. Les deux suivants ne sont dotes que de l'attri- 
but href pour l'element <a> (reperes Q et ©). Nous pouvons meme nous passer de l'ele- 
ment <a> et utiliser seulement un bouton en guise de lien mais il faut creer la redirection 
avec du code JavaScript (repere ©). Cette forme parait plus simple mais la forme initiale 
me semble meilleure car plus conforme au standard XHTML et qu'il n'est pas positif de 
nous plier au manque de conformite d'un certain navigateur. Notons egalement que, pour 
plus simple qu'elle paraisse, elle necessite l'emploi de JavaScript. II n'est pas difficile 
d'imaginer ce qui peut se passer si l'utilisateur a choisi de bloquer l'execution de Java- 
Script dans son navigateur : aucun lien de ce type ne fonctionne plus. 

Exemple 5-5. Navigation utilisant des boutons 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<title> Liens et boutons </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-l" /> 
</head> 
<body> 

<hl>XHTML 1.1 et CSS 2.1</hl> 
<div>Visitez les sites 

<a id="lienl" href="http://www.w3.org/TR/xhtmlll"> 
<button type="button" oncl ick="window. location = ' 

http://www.w3.org/TR/xhtmlll'"> XHTML </button>© 
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</a>    

<a id="lien2" href="http://www.w3.org/TR/CSS21/">© 

<button type="button"> CSS 2.1 </button> 
</a>    
<a id="lien3" href="http://www.w3.org"> 

<button type="button" value="W3C"> Le site W3C </button> 
</a>© 

<button type="button" onclick = "window. location= ' 

http://www.editions-eyrolles.com'"> Editions Eyrolles </button>© 
</div> 
</body> 
</html> 
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Dans son etat courant, une image n'est pas sensible au clic pour provoquer un lien hyper- 
texte, a moins de gerer l'attribut onclick comme nous venons de le faire pour l'element 
<button>. Pour qu'elle devienne l'origine d'un lien, il sufrit de l'inclure dans un element 
<a> et de definir l'attribut href de cet element de la meme maniere que pour un lien ordi- 
naire. L'image sera alors entouree d'une bordure, generalement en bleu, pour signaler 
qu'il s'agit d'un lien. L'exemple 5-6 cree un systeme de navigation dont les origines des 
liens sont des images representant des couvertures de livre de votre editeur prefere. Cha- 
que clic sur une image dirige le visiteur vers la page dans laquelle se trouve une image 
grand format de la meme couverture et une description detaillee du livre. Chaque ele- 
ment <a> (reperes ©- ©, et Q i contient une image (reperes Q, Q. © et ©). L'attribut 
href de chaque element <a> renferme l'adresse de la page cible du lien. L'element <a> ne 
contenant aucun texte, c'est l'attribut title de chaque element <img /> qui peut donner 
une information sur la cible du lien quand le curseur survole l'image (ici, 1' information 
est ecourtee afin d'alleger le code). 

Exemple 5-6. Creation de lien a partir d'images 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
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<html xmlns="http://www. w3.org/1999/xhtml " xml :1 ang="fr"> 
<head> 

<title> Liens et images </title> 
<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
</head> 
<body> 

<hl>De bonnes lectures recommandees</hl> 

<!-- Ensemble des liens crees a partir d'images miniatures --> 
<P> 

<a href="php5.html " >© 

<img src=". ./images/couvphp5.gif" alt="PHP 5 Cours et exercices" wi dth=" 100" 
height="130" title="PHP 5 Cours et exercices" />© 
</a>   
<a href="objet.html ">© 

<img src=". ./images/couvobjet.gif" alt="L'oriente Objet" width="100" 
height="130" title="L'oriente objet" />© 
</a>   
<a href="reseaux. html ">© 
<img src=" . ./images/couvreseaux.gif " alt="Reseaux et telecoms" width="100" 
^» height="130" title="Reseaux et telecoms"/>© 
</a>   
<a href="uml .html ">© 

<img src=". ./images/couvuml2.gif" alt="UML 2 par la pratique" width="100" 
height="130" title="UML 2 par la pratique"/>© 

</a> 
</p> 
<hr /> 
</body> 
</html> 



La figure 5-9 montre le resultat obtenu. 
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Comme nous l'avons fait pour un texte, il est possible de definir une ancre sur une image 
en definissant 1' attribut 1 d de 1' element <a >. Cette technique peut etre utilisee par exemple 
pour diriger le visiteur vers une image particuliere en grand format (soit 1' ancre), situee 
dans la meme page ou dans une autre a partir d'une serie d' images miniatures (les origines 
des liens). 



Creer plusieurs liens sur la meme image 

Nous avons deja vu au chapitre precedent comment creer des zones sensibles au clic sur 
une image pour declencher des scripts quand l'utilisateur clique ou positionne simple- 
ment le curseur sur l'une des zones. En utilisant les memes elements XHTML, nous pou- 
vons definir des zones sensibles au clic sur une meme image pour creer un lien different 
pour chaque zone. L'ensemble des zones sensibles est defini dans une carte creee grace a 
l'element <map> qui contient autant d'elements <area /> que nous voulons creer de zones. 
La structure du code XHTML de creation d'une carte de liens est la suivante : 

<div> 
<map id="cartel"> 
<area href="URL de la cible 1" alt="Cible 1" shape="mot-cl e" 

coords="coordonnees" /> 
<area href="URL de la cible 2" alt="Cible 2" shape="mot-cl e" 

coords="coordonnees" /> 
<!-- Suite des elements <area> --> 
</map> 
</div> 

L'element <map> doit avoir un attribut id qui contient 1'identificateur de la carte. Precede 
du caractere diese (#), celui-ci peut etre utilise par plusieurs images differentes en etant 
affecte a l'attribut usemap de l'element <img />. Chaque element <area /> contient l'URL 
du document cible du lien, definie dans son attribut href comme pour l'element <a>. 
Comme pour une image, l'attribut alt de chaque element <area /> est obligatoire et four- 
nit un texte de substitution si 1' image ne peut pas etre affichee, ou pour les navigateurs 
non graphiques. L'attribut shape definit la forme de la zone sensible au clic. II prend les 
valeurs rect, ci rcl e, poly pour creer respectivement un rectangle, un disque un polygone, 
ou la valeur def aul t qui permet de gerer tous les clics effectues en dehors des zones sen- 
sibles definies avec les elements <area />. La definition des formes est faite en donnant 
les coordonnees en pixels des points cles de la forme dans l'attribut coords. L'origine des 
coordonnees est Tangle superieur gauche de l'image. 

• Si shape="rect", l'attribut coords s'ecrit coords="Xhg,Yhg,Xbd,Ybd". Les valeurs 
(Xhg.Yhg) et (Xbd.Ybd) sont respectivement les coordonnees des sommets superieur 
gauche et inferieur droit du rectangle. 

• Si shape=" circle", l'attribut coords s'ecrit coords="Xc,Yc,R" , (Xc.Yc) etant les coordonnees 
du centre et R le rayon du disque. 

• Si shape="poly", l'attribut coords contient la suite des coordonnees de chaque sommet et se 
termine par la repetition des coordonnees du premier point pour fermer le polygone. 
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L'utilisation de l'attribut title pour chaque element <area /> permet de definir un texte 
explicatif different qui s'affiche quelques instants si le curseur reste sur la zone sensible. 

Pour chaque element <area />, il est utile de definir les attributs accesskey et tabi ndex, que 
nous avons deja rencontres, pour creer un raccourci clavier et un ordre de tabulation pour 
rendre chaque zone active. Comme un lien <a>, chaque zone sensible peut etre definie 
comme une ancre. Dans ce cas, il faut lui donner un attribut id, omettre l'attribut href et 
facultativement preciser cette omission en definissant l'attribut nohref avec la valeur boo- 
leenne unique nohref. Comme tous les elements pouvant recevoir le focus, l'element 
<area /> possede les attributs gestionnaires d'evenements onfocus quand la zone recoit le 
focus au moyen de la souris, d'un raccourci clavier ou d'une tabulation, et onbl ur quand 
elle le perd par les memes moyens. II est alors possible de declencher l'execution d'un 
script JavaScript lorsque ces evenements surviennent. Nous pouvons egalement declen- 
cher des scripts pour creer des effets visuels avec les gestionnaires d'evenements onmou- 
seover et onmouseout quand le curseur survole ou quitte une zone sensible. 

Dans l'exemple 5-7, nous creons une navigation a partir de l'image d'une carte de France 
pour laquelle nous definissons un ensemble de zones sensibles a l'aide des elements 
<map> et <area />. La carte des zones est identifiee par l'attribut id de l'element <map> sous 
le nom regi ons (repere ©). La premiere zone correspondant a la region parisienne est cir- 
culate (repere ©), la deuxieme pour la region Pays de la Loire est un polygone a quatre 
cotes (repere ©) et la derniere pour la region Centre est un rectangle (repere 0). Le der- 
nier element <area> ayant l'attribut shape avec la valeur defaul t permet de diriger les visi- 
teurs vers la page d'accueil en cas de clic sur les autres parties de la carte (repere 0). La 
carte des zones sensibles est utilisee par l'image de la carte de France (repere ©). A cet 
effet, l'identifiant de la carte est done donne comme valeur de l'attribut usemap de l'ele- 
ment <img />. 

Exemple 5-7. Liens a partir d'une image 

<?xml version="1.0" encoding="iso-8859-l"?> 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtrnll/DTD/xhtnill-strict.dtd">© 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<ti tl e>Li ens et image sensible aux cl ics</title> 

<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
</head> 
<body> 
<div> 

<hl>Les sites des regions</hl> 

<!-- Va 1 i de W3C XHTML 1.0 avec # dans usemap : Fonctionne dans 

Opera .Mozil 1 a , Fi reFox, Explorer- -> 
<map id="regions" name="regions">0 
<area href="http://www. pan's .fr" alt="Region parisienne" 

title="Region parisienne" shape="ci rcl e" coords="180,98,16" />0 
<area href="http://www.nantes .fr" alt="Pays de Loire" title="Pays de Loire" 
shape="poly" coords^" 76 , 146 , 95 . 110 , 138 . 130 . 94 . 182 . 76 . 146 " />© 
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<area href="http: //www. orleans.fr" alt="Region Centre" title="Region Centre" 
* shape="rect" coords="142,118,188,180" />© 

<area shape="default" href="http://www.funhtml .com" alt="Page d'accueil" 
title="La page d'accueil "/>© 
</map> 

<img usemap="#regions" src=". ./images/france.gif" alt="Carte des regions" 
width="344" height="336" />© 
</div> 
</body> 
</html> 

Vous n'avez pas manque de remarquer que cet exemple n'utilise pas la DTD XHTML 1.1 
mais la DTD XHTML 1.0 strict (repere ©)• Nous y sommes contraint pour que la page 
soit validee par le W3C. En effet, son service de validation signale une erreur de confor- 
mite quand on utilise le caractere diese (#) dans l'attribut usemap alors que le code de 
l'exemple est valide avec la DTD 1.0 strict, qui est theoriquement quasi similaire. II 
s'agit probablement d'un bogue non eclairci a ce jour malgre de nombreux tests. 

La figure 5-10 illustre le resultat obtenu, dans lequel on peut remarquer que l'utilisation 
de l'attribut tit! e permet l'affichage d'un message pour chaque region. 
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Ouverture de la cible dans une nouvelle fenetre 

La creation de liens externes comme ceux de l'exemple 5-7 presente l'inconvenient de 
provoquer la fermeture de la page de votre site afin d'en ouvrir une autre. Pour y reme- 
dier et laisser votre page visible, vous pouvez choisir d'afficher le document cible dans 
une nouvelle fenetre en utilisant, comme nous l'avons deja fait par ailleurs, la methode 
JavaScript window. open ( ) dont le premier parametre est l'adresse URL de la cible, et dont 
les deux suivants sont respectivement la largeur et la hauteur de la fenetre souhaitee, 
exprimes en pixels. II faut alors l'associer a l'attribut oncl i ck de chaque element <area /> 
pour obtenir l'effet desire pour chaque lien. L'attribut href de cet element n'est alors plus 
utile et doit etre supprime, faute de quoi la page cible s'ouvre dans deux fenetres diffe- 
rentes, l'ancienne et une nouvelle. 

Nous pouvons ecrire par exemple le code suivant : 

<map id="regions" name="regions"> 

<area alt="Region parisienne" title="Region parisienne" shape="ci rcl e" 

coords="180,98,16" oncl ick="window.open( 'http://www.paris.fr/' ,800,600)" /> 

</map> 

Dans ce cas, la page cible www.paris.fr sera visible dans une nouvelle fenetre de 800 sur 
600 pixels. 



L'attribut target 

Dans les DTD HTML 4 et en XHTML 1.0 Transitional, I'element <a> possede un attribut target qui 
permet de designer la page cible d'un lien. II peut prendre les valeurs predefines _bl ank, _parent, 
_sel f et _top pour afficher la cible, respectivement, dans une nouvelle fenetre, la fenetre parent de la 
fenetre en cours, la fenetre elle-meme et la fenetre de plus haut niveau. Les trois dernieres valeurs sont 
surtout utilisees dans le cas de creation de cadres (voir le chapitre 8, Creer des cadres). 



Liens declenchant une action 

Lien declenchant I'envoi d'un e-mail 

Un site qui se dit a l'ecoute de ses visiteurs doit leur permettre d'entrer en contact avec 
son webmestre afin qu'ils envoient leurs observations ou questions. Pour leur faciliter la 
tache, il ne suffit pas d'indiquer une adresse e-mail dans chaque page. On doit creer un 
type de lien particulier provoquant, en un clic, l'ouverture automatique du logiciel de 
courrier prefere du visiteur avec comme destinataire l'adresse que l'auteur du site aura 
choisi dans son code. Pour realiser cette operation, il suffit que l'attribut href du lien soit 
compose du nom de protocole mai 1 to : suivi de l'adresse e-mail du contact. 

En associant les elements <address> et <a>, nous pouvons ecrire par exemple le code suivant : 

<address> 

<a href="mailto:webmaster@funhtml .com"> Contactez nous! </a> 
</address> 
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L' element <address> peut bien sur etre remplace par un autre element de type bloc, 
comme <p> ou <div>. II est de plus possible de faciliter la tache du visiteur en remplissant 
a sa place des champs dans son logiciel de courrier. Pour definir le sujet du courrier, dans 
l'attribut href, il faut faire suivre l'adresse e-mail par un point d' interrogation (?) puis du 
mot-cle subject^ et du texte choisi pour l'objet du message sans guillemets. Nous pou- 
vons definir par exemple l'objet de l'e-mail de la maniere suivante : 

<P> 

Demande de <a href="mailto:xhtml@funhtiTil .com?subject=Demande de rensei gnements"> 

documentation</a> 
</p> 

Nous pouvons encore ajouter un ou plusieurs destinataires en copie visible. Dans ce cas, 
le destinataire d'une copie de l'e-mail sera informe qu'il ne recoit qu'une copie d'un e- 
mail et aura connaissance du destinataire principal et des autres destinataires mis en 
copie. II faut pour cela faire suivre l'adresse du destinataire principal du caractere ?, puis 
du code cc=, suivi de l'adresse du destinataire mis en copie. Pour ajouter plusieurs desti- 
nataires en copie, il faut separer chaque adresse de la precedente par un caractere point- 
virgule (;). Pour ajouter un destinataire, nous pouvons ecrire : 

<P> 

Reclamation de 

<a href="mailto:xhtml@funhtml .com?cc=php5@funhtml .com"> commande non recue</a> 
</p> 

Si nous voulons ajouter un destinataire sans que son adresse e-mail apparaisse, il faut 
l'ajouter en copie cachee en utilisant le code bcc a la place de cc. La aussi, nous pouvons 
indiquer plusieurs adresses en les separant par un point- virgule (;). 

Toutes les options precedentes peuvent etre utilisees simultanement en les separant tou- 
tes les unes des autres par l'entite de caractere correspondant au caractere esperluette (&), 
soit l'entite &. Notez que le caractere & lui-meme est interdit dans l'attribut href et 
qu'il faut le remplacer par l'entite correspondante. 

L' exemple 5-8 cree une liste de liens permettant au visiteur de demander l'envoi d'une 
documentation sur differents types de services offerts par un site d'assurance. II com- 
porte trois liens contenus chacun dans un paragraphe (reperes O- et ©)• Ces liens 
declenchent l'envoi d'un e-mail a une adresse differente selon le choix effectue par le 
visiteur. Pour tous ces liens, nous avons defini un objet de message personnalise different 
(avec subject=), une adresse en copie simple et une adresse en copie cachee vers deux 
services de l'entreprise. 

Exemple 5-8. Envoi d'e-mail a partir d'un lien 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Envoi d'e-mail</title> 
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< 1 ink rel ^"shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" t1tle=""> 
</style> 
</head> 
<body> 

<hl>Vos contact assurances</hl> 
<p>Demande de documentation sur V 

<a href="mailto:auto@funhtml . com?subject=assurance auto& 

cc=market@f unhtml .com&bcc=commercial@funhtml . com">assurance auto</a>© 

</p> 

<p>Demande de documentation sur V 
<a href="mailto:habitation@funhtml .com?subject=assurance habitation& 

cc=market@f unhtml .com&bcc=commercial@funhtml ,com">assurance habitation< 
/a>© 

</p> 

<p>Demande de documentation sur V 
<a href="mailto:vie@funhtml .com?subject=assurance vie& 
■» cc=market@f unhtml .com&bcc=commercial@funhtml .com">assurance vie</a>© 
</p> 
</body> 
</html> 

La figure 5-11 presente le resultat obtenu. Notons que le contenu de l'attribut href est 
affiche comme les autres types de liens dans la barre d'etat du navigateur, quand le cur- 
seur survole le lien. 
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Les liens utilisant le protocole mail to: peuvent, comme tous les autres, contenir une 
image. Un clic sur celle-ci provoque done l'ouverture du logiciel de courrier. Cette pos- 
sibility peut etre exploitee pour une demande de renseignements dans un site de petites 
annonces, par exemple apres un clic sur la photographie de 1' article qui interesse un visi- 
teur. La reference de l'article peut alors etre inseree dans l'objet de 1' e-mail, ainsi que 
l'adresse du destinataire. 
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Les liens declenchant un script JavaScript 

Un lien peut egalement etre utilise pour declencher l'execution d'un script JavaScript 
sans utiliser un gestionnaire d'evenements tel que oncl ick comme nous l'avons vu prece- 
demment. Pour realiser cette operation, il faut que l'attribut href de l'element <a> 
contienne le nom de protocole javascript:, suivi du code que Ton desire voir s'executer 
en cas de clic sur le lien. Ce code peut etre l'appel d'une fonction qui doit alors etre ecrite 
dans un element <script> situe soit dans l'en-tete de la page (l'element <head>), soit dans 
le corps du document de cette meme page, ou encore dans un fichier externe ayant 
1' extension . j s incorpore par un element <1 i nk> (voir le chapitre 2). 

Pour creer ce type de lien, nous ecrivons par exemple le modele suivant : 

<p>Cliquez pour <a href="javascript:code JavaScript">executer le script</a></p> 

Si le code JavaScript est court, il peut etre ecrit directement a la suite du mot-cle java- 
script:. Mais s'il est plus long, il est conseille de definir une fonction dans un element 
<scri pt> et de faire suivre le mot-cle de l'appel de cette fonction. 

L' exemple 5-9 utilise ce type de lien pour proposer le declenchement de plusieurs fonctions 
JavaScript definies dans l'en-tete du document (repere ©). Le premier lien permet d'affi- 
cher a la demande la date et l'heure complete dans une boite de dialogue (repere ©) par 
l'appel de la fonction 1 adate( ) (repere ©). Le deuxieme permet de modifier la couleur de 
fond de la division contenant les liens (repere ©) en appelant la fonction fond rouge ( ) qui 
attribue un style a la division dont 1' attribut i d vaut di vi s (repere 0). Enfin, le troisieme lien 
permet a l'utilisateur de modifier la taille de la police du texte de l'element <div> dans 
lequel il se trouve (repere 0) en appelant la fonction grandtexte( ) (repere 0). 

Exemple 5-9. Creation de liens JavaScript 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 
<head>0 

<title> Liens vers des scripts JavaScript </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<script type="text/javascript"> 
<! — 

function ladate()0 

{ 

jour= new Date; 
al ert( jour) ; 

} 

function fondrouge()0 

{ 

col="#F00"; 

document. getEl ementById( 'divis' ) . style. backgroundCol or^col ; 

} 

function grandtextet ) 

{ 
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document. get Element By Id ( 'divis' ) .style.fontSize='20px' ; 

} 

--> 
</script> 
</head> 

<body id="page"> 
<div id="divis"> 
<hl>Lancer des scripts JAVASCRI PT</hl> 

<a href="javascript:ladate()">Afficher la date</a><br />© 
<a href="javascript:fondrouge( ) ">Creer un fond rouge pour cette division 
</a><br />© 

<a href="javascript:grandtexte() ">Afficher le texte avec des caracteres 

de 20 Pixels</aXbr />© 
</div> 
</body> 
</html> 

La figure 5-12 montre l'etat initial de la page et celui qu'elle a apres l'activation des trois 
liens. 
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Exercices 

Exercice 1 : Peut-on inclure directement un element <a> dans les elements <body>, 
<address>, <pre> ou <form> ? 

Exercice 2. Ecrivez la phrase : « Le langage XHTML permet la creation de pages 
structurees, CSS 2 des presentations variees. ». Creez des liens vers les sites 
http://www.funhtml.com/xhtml et http://www.w3.org/TR/CSS21/ pour les mots « XHTML » et 
« CSS 2 ». 

Exercice 3. Declenchez l'ouverture d'une boite de dialogue JavaScript en cas de clic sur 
un lien textuel. 

Exercice 4. Creez un lien vers un document PDF (par exemple : http://www.w3.org/TR/ 
CSS21/css2 . pdf ), puis vers un fichier MP3. Indiquez le type du document cible en utilisant 
l'attribut correct. 

Exercice 5. Creez plusieurs paragraphes dans une page. Chacun d'eux contient un titre et 
un texte quelconque assez long. Chaque titre doit avoir un identifiant et contenir une 
ancre. En haut de la page, ajoutez un titre <hl> contenant les noms des differents paragra- 
phes, chacun etant inclus dans un lien. Gerez ensuite les attributs href pour permettre une 
navigation reciproque entre ce menu et chacun des paragraphes. 

Exercice 6. A partir de 1' exercice precedent, remplacez le titre qui sert de menu par des 
boutons. Un clic sur chaque bouton doit permettre la meme navigation vers les paragraphes. 

Exercice 7. Recuperez les logos des differentes chaines de television sur leur site respec- 
tif. Creez une page incluant ces logos, puis des liens vers le site de chaque chaine a partir 
de ces logos sans utiliser l'attribut oncl ick. 

Exercice 8. Meme question que dans l'exercice 7, mais sans utiliser l'element <a>. 

Exercice 9. A partir de l'exercice 7, modifiez le code de facon a ce que chaque cible d'un 
lien s'ouvre dans une nouvelle fenetre sans que la page d'origine ne se ferme. 

Exercice 10. A partir d'une carte d' Europe (recuperable par exemple sur le site : 
http://europa.eu.int/abc/maps/index_fr.htm), creez des zones sensibles pour la France (en 
forme de cercle), l'Allemagne (en forme de rectangle) et la Grande-Bretagne (en forme de 
polygone), et dirigez le visiteur vers un site quelconque de chaque pays (par exemple, celui de 
amazon . com avec les extensions . f r, . de et . co . uk). Le clic en dehors de ces zones doit etre gere, 
c'est-a-dire qu'il doit diriger le visiteur vers un site par defaut (par exemple amazon . com). 

Exercice 11. Reutilisez l'exemple precedent de facon a ce que chaque page cible s'affiche 
dans une nouvelle fenetre de dimensions 640 par 480 pixels. 

Exercice 12. Creez des liens a partir de la carte d'Europe precedente arm que chaque clic sur 
une zone declenche l'envoi d'un e-mail a votre adresse. Chaque e-mail a pour objet le nom du 
pays concerne. Si vous possedez plusieurs adresses, mettez la deuxieme en copie. 

Exercice 13. Creez deux boutons dans une page. Le premier contient le texte « Fond rouge/ 
Texte blanc », et le second « Fond noir/Texte jaune ». En vous inspirant de l'exemple 5-9, 
provoquez le changement des couleurs de fond et de texte en cas de clic sur les boutons. 
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Dans une page XHTML, il est possible de realiser une presentation d' informations de 
type textuelle ou graphique sous la forme de tableaux. De la meme maniere que dans un 
tableur Excel ou OpenOffice, un tableau cree en XHTML est compose de lignes et de 
colonnes. A l'intersection de ces dernieres se trouve une cellule du tableau dont le 
contenu peut etre constitue aussi bien d'elements de type bloc (titres, paragraphes, divi- 
sions, listes), d'elements en ligne tels que des images, ou encore d'elements de formu- 
laire. Nous verrons qu'a partir d'une grille de base, il est possible de fusionner plusieurs 
cellules voisines, ce qui permet de creer des tableaux asymetriques tres varies. Les 
tableaux ont souvent ete utilises pour elaborer des mises en page de documents sur 
plusieurs colonnes en lieu et place des cadres (voir le chapitre 8). Meme si nous etudions 
dans ce chapitre le precede permettant de realiser des presentations variees, il faut savoir 
que cette tendance est actuellement abandonnee au profit de 1' utilisation des proprietes 
CSS de positionnement qui permettent de proceder aux memes types de realisations 
d'une maniere plus elegante et moins rigide. Nous retrouvons ici la tendance permanente 
en XHTML de separation du contenu et de la presentation. Les tableaux n'en continuent 
pas moins d'etre des elements essentiels d'une page XHTML pour la presentation des 
donnees. 



La structure generale d un tableau 

L element essentiel dans la creation de tableaux est <table>, car il s'agit du conteneur 
renfermant tous les autres elements de tableau. En lui-meme, il ne fournit done aucun 
resultat visuel et ne prend d'importance que par ses elements enfants. Comme il est de 
type bloc, il peut etre inclut directement dans le corps du document <body>. II peut aussi 
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etre inclut dans des elements XHTML divers dont la liste est presentee dans le 
tableau 6-1. 

Tableau 6-1. Les elements parents de l'element <table> 



blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th 

I I 

Nous devons creer sa structure ligne par ligne. Chaque ligne est declaree par un element 
<tr> (pour table row). La creation de chaque cellule d'une ligne est declaree par un ele- 
ment <td> (pour table data) pour les cellules standards du tableau ou <th> (pour table 
head) pour les cellules qui jouent le role d'en-tete de colonne ou de ligne. Ces elements 
sont les seuls enfants autorises pour l'element <tr>. La priorite est en effet donnee aux 
lignes sur les colonnes, priorite que nous retrouverons dans la definition des styles des 
tableaux au chapitre 14, Le style des tableaux. Pour un tableau regulier, nous obtenons 
done une structure du code XHTML dans laquelle il y a autant d'elements <tr> inclus 
dans <table> que de lignes et d'elements <td> ou <th> inclus dans les differents elements 
<tr> que de colonnes dans chaque ligne. La diversite du contenu d'un tableau n'apparait 
que dans le contenu des elements <td> et <th> dont le tableau 6-2 donne la liste des ele- 
ments enfants. 

Tableau 6-2. Les elements enfants des elements <td> et <th> 

Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, dl, em, fieldset, 
form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, object, ol, p, pre, q, samp, script, 
select, small, span, strong, sub, sup, table, textarea, tt, ul, var 

La structure d'un tableau elementaire regulier (contenant autant de cellules dans chaque 
ligne) est done celle presentee dans l'exemple 6-1. Faute de precision supplementaire, la 
largeur du tableau est fonction du contenu des cellules le composant. Dans ces condi- 
tions, si le contenu d'une cellule est important, elle s'elargit automatiquement jusqu'a ce 
que le tableau occupe toute la largeur de la page. Si toutes les cellules ont ce type de 
contenu, le partage de la largeur est fait equitablement entre elles et leur contenu occupe 
plusieurs lignes. Pour terminer la presentation d'un tableau, nous pouvons lui attribuer un 
titre general qui doit etre contenu dans l'element <caption>, lui-meme inclus dans 
<table>. Cet element doit etre le premier a apparaitre dans <table>. Son contenu, qui 
apparait par defaut au-dessus du tableau, peut etre constitue d'elements divers dont la 
liste figure dans le tableau 6-3. Cette position peut etre modifiee en recourant a un style 
CSS (voir la propriete caption-side). 

Tableau 6-3. Les elements enfants de l'element <caption> 

Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, label, map, 
object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var 
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Exemple 6-1. Un tableau elementaire 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<ti tl e>Tableau el ementai re</titl e> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body > 

<table border="l"> 
<caption>Un tableau élémentaire</caption> 
<tr> 

<td> Ligne 1 Colonne 1 </td><td> Ligne 1 Colonne 2 </td><td> Ligne 1 Colonne 3 
</td> 

</tr> 
<tr> 

<td> Ligne 2 Colonne 1 </td><td> Ligne 2 Colonne 2 </td><td> Ligne 2 Colonne 3 
</td> 

</tr> 
<tr> 

<td> Ligne 3 Colonne 1 </td><td> Ligne 3 Colonne 2 </td><td> Ligne 3 Colonne 3 
</td> 

</tr> 
</table> 
</body> 
</html> 

La figure 6-1 presente le resultat obtenu pour ce code. 
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Les attributs de /'element <table> 

L' element <table> possede l'ensemble des attributs communs, les plus couramment utili- 
ses etant title, qui permet d'expliciter son contenu general, et class pour lui appliquer 
des styles, et bien sflr l'attribut id pour l'identifier de maniere unique. II possede egale- 
ment les attributs suivants, permettant d'affiner son organisation ou sa presentation par 
defaut : 

• border ="N" : il definit la largeur des bordures externes et internes qui delimitent le 
tableau et les cellules. Sa valeur s'exprime exclusivement en nombre de pixels et la 
valeur est admise pour cacher ses bordures. L'unite px, pour pixel, ne doit pas etre 
indiquee car elle est implicite. Nous pourrons par la suite affiner la taille des bordures 
du tableau, les lignes et des cellules a l'aide de styles CSS (voir le chapitre 14). 

• width="N px | H%" : il definit la largeur totale du tableau dans la page. La possibilite de 
definir une largeur relative en pourcentage est tres pratique pour adapter le tableau a 
l'ecran du visiteur. 

• eel 1 paddi ng=" N px | NX" : il definit la largeur de l'espacement entre le contenu d'une 
cellule et sa bordure. 

• cellspacing="N px | H%" : il definit l'espacement entre les bordures de chaque cellule. 
Pour que cet attribut soit pris en compte, il faut que l'attribut border ait ete par ailleurs 
defini avec une valeur non nulle. Si on omet de definir une valeur pour l'attribut eel 1 - 
spacing, sa valeur est la meme que celle de border. 

• frame : il permet de diversifier l'affichage des bordures externes du tableau en n'affichant 
qu'une partie d'entre elles. II peut prendre les valeurs suivantes : 

- void : supprime toutes les bordures exterieures ; 

- above : ne laisse subsister que la bordure superieure ; 

- bel ow : ne laisse que la bordure inferieure ; 

- 1 hs : ne laisse que la bordure gauche ; 

- rhs : ne laisse que la bordure droite ; 

- hsides : ne laisse que les bordures horizontales haute et basse ; 

- vsides : ne laisse que les bordures verticales gauche et droite ; 

- box ou border : ne laisse que les quatre bordures externes. 

• ml es : il definit l'affichage des bordures internes du tableau, situees entre les cellules. 
II prend les valeurs suivantes : 

- none : supprime toutes les bordures internes ; 

- rows : ne laisse que les bordures horizontales ; 

- col s : ne laisse que les bordures verticales ; 

- all: affiche toutes les bordures. C'est le comportement par defaut ; 
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- groups : n'affiche que les bordures delimitant les groupes de lignes ou de colonnes 
dermis par les elements <col /> et <col group>, <tbody>, <thead> et <tf oot>, dont nous 
allons voir les roles respectifs ci-apres. 

• summary : il contient un texte decrivant plus completement le contenu du tableau que 
l'element title. De plus, ce texte n'est pas utilise dans les navigateurs visuels habi- 
tuels, mais uniquement dans les navigateurs oraux destines aux non-voyants. 

L'exemple 6-2 reprend le contenu de l'exemple 6-1 en ajoutant a l'element <table> une 
partie des attributs que nous venons de decrire. Nous y definissons une bordure de 
8 pixels (repere OX un espacement entre les cellules de 5 pixels (repere ©), un espace- 
ment entre le contenu des cellules et leurs bordures de 20 pixels (repere ©). La largeur 
totale du tableau est egale a 70 % de celle de son conteneur (repere ©). Ici, il s'agit de 
l'element parent <body>, le pourcentage est done calcule par rapport a la largeur de la 
fenetre du navigateur, mais ce n'est pas necessairement toujours le cas, si par exemple le 
tableau est inclut dans une division dont la largeur est elle-meme fixee a une valeur infe- 
rieure a celle de la fenetre. Enfin, l'attribut frame permet de n'afficher que les bordures 
horizontales du tableau (repere 0). 

Exemple 6-2. Les attributs de l'element <table> 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Tableau elementaire utilisant les attributs de table</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 

<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 

</head> 

<body > 

<caption><strong>Un tableau élémentaire</strongX/caption> 
<table border="8" O cellspacing="5px" © eel 1 paddi ng="20" © width="70%" Q 
^» f rame="hsides" 0> 
<tr> 

<td> Ligne 1 Colonne 1 </td><td> Ligne 1 Colonne 2 </td><td> Ligne 1 Colonne 3 
</td> 

</tr> 
<tr> 

<td> Ligne 2 Colonne 1 </td><td> Ligne 2 Colonne 2 </td><td> Ligne 2 Colonne 3 
</td> 

</tr> 
<tr> 

<td> Ligne 3 Colonne 1 </td><td> Ligne 3 Colonne 2 </td><td> Ligne 3 Colonne 3 
</td> 

</tr> 
</table> 
</body> 
</html> 



Le langage XHTML 

Partie I 



La figure 6-2 montre les notables differences d' aspect obtenues en utilisant ces attributs. 
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Creer des groupes de lignes et de colonnes 

Pour mieux structurer les donnees d'un tableau, nous pouvons y creer des groupes de 
lignes ou de colonnes. Cette structuration permet de mettre en evidence differentes par- 
ties du tableau et peut, dans ce cas, se reveler particulierement utile en vue d'y appliquer 
des styles personnalises. 



Les groupes de lignes 

Nous pouvons creer des groupes de lignes pour operer une structuration horizontale du 
tableau. II s'agit dans ce cas de realiser un en-tete, un ou plusieurs groupes de lignes conte- 
nant les donnees proprement dites, et eventuellement un pied de tableau. 

Un en-tete est cree a l'aide de l'element <thead>. II contient autant d'elements <tr> que de 
lignes necessaires a l'en-tete, chacun contenant ensuite autant d'elements <th> (au lieu 
de <td>) que nous avons besoin de colonnes. Chaque element <th> contient generalement 
le titre d'une colonne. Par defaut, le contenu de ces elements est mis en evidence en etant 
affiche en caracteres gras et centre dans la cellule. 

Quand le tableau est d'une hauteur superieure a celle de la fenetre du navigateur, il est 
utile de repeter ces titres en pied de tableau. Un pied de tableau peut aussi contenir les 
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totaux de chaque colonne dans les tableaux de donnees numeriques. Pour creer ce pied de 
tableau nous ecrivons l'element <tfoot>, contenant comme <thead> les elements <tr> qui, 
a leur tour, incluent des elements <th>. Notons que la position de ces elements dans le 
code n'influe pas sur leur position dans le tableau, et qu'ils doivent etre ecrits a l'interieur 
de l'element <table> avant la definition des lignes de donnees du tableau creees avec 
l'element <tbody>. De plus, ils ne doivent apparaitre chacun qu'une seule fois dans le 
tableau. 

Entre l'en-tete et le pied de tableau se trouve le corps du tableau avec ses donnees. II est 
cree en utilisant l'element <tbody> qui contient un element <tr> par ligne, puis des ele- 
ments <td> pour chaque cellule. Quand il est necessaire de faire ressortir plusieurs grou- 
pes de donnees dans le corps du tableau, il est envisageable d'inserer plusieurs elements 
<tbody> dans le meme tableau. Cela permet d'appliquer un style different pour chaque 
groupe. 

En supplement de l'ensemble des attributs communs, les elements <thead>, <tfoot> et 
<tbody> possedent les attributs suivants qui permettent de definir la position du contenu 
de leurs cellules : 

• align ="1 eft | center | right | justify | char" : il definit l'alignement horizontal du 
contenu respectivement a gauche, au centre, a droite ou justifie dans la cellule. La 
valeur char permet l'alignement sur un caractere donne qui doit etre precise dans 
l'attribut char. 

• valign ="top | middle | bottom | basel ine" : il definit l'alignement vertical du contenu 
respectivement sur le haut, le milieu ou le bas de la cellule. La valeur basel ine cree 
un alignement sur la ligne de base du texte (la ligne de support de pieds des lettres 
minuscules). 

• char ="un_caractere" : il indique le caractere sur lequel doit etre realise l'alignement 
des nombres decimaux si l'attribut al ign vaut char. 

• charoff ="N px | N %" : il donne le decalage du caractere d'alignement defini dans char. 
Les attributs char et charoff ne sont actuellement pas pris en compte par les navigateurs, 
meme les plus recents. 

Nous pouvons definir l'alignement ligne par ligne ou meme pour chaque cellule indivi- 
duellement car les elements <tr>, <td> et <th> possedent les memes attributs align et 
valign. La structure d'un tableau comprenant des en-tetes, pied de page et corps de 
tableau est done semblable a celle presentee dans l'exemple 6-3. Nous definissons dans 
l'element <tabl e> les attributs frame et rul es pour n'afficher que les bordures externes du 
tableau et les lignes de separation horizontales entre les differents groupes (repere 0), 
ainsi que l'espacement entre les cellules avec cellspacing et la largeur totale du tableau 
avec width. II contient un en-tete et un pied de tableau qui incluent les titres de colonnes 
dans des elements <th> (reperes et 0). Viennent ensuite deux elements <tbody> (repe- 
res et 0) dont le role est de definir des groupes de lignes auxquelles il est alors possi- 
ble d'appliquer des styles differents. Le premier groupe contient trois lignes (reperes 0, 
et 0) et le second deux lignes (reperes © et ©). Ces styles, que nous ne detaillerons 
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pas ici, sont dermis dans l'element <head> (repere ©) et nous permettent de bien distinguer 
les deux groupes comme nous pouvons le constater figure 6-3. 

Exemple 6-3. Un tableau avec en-tete et pied de tableau 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Tableau avec en-tete et pied </title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 

< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

<style type="text/css" >Q 

. rouge {background- col or :yel 1 ow; } 

.bl eu{ background-col or : gray ; col or:#FFF; } 
table{border-color:red; } 

</style> 
</head> 
<body > 

<hl>Statistiques des contrôles radars sur autoroute A7</hl> 
<table border="5" frame="box" rules="groups" cellspacing="5" width="90%">© 
<thead><tr><th> Vitesse mesuree en km/h </th><th> Nombre de Vehicules </th> 

* <th> Sanction operees</thX/trX/thead>© 

<tfoot><tr><th> Vitesse mesuree en km/h </th><th> Nombre de Vehicules </th> 

* <th> Sanction operees</thX/trX/tfoot>© 
<tbody class="rouge" al ign="center">© 

<tr>© 

<td> de 90 a 110 km/h </td><td> 325 </td><td> NON </td> 
</tr> 
<tr>© 

<td> de 110 a 130 km/h </td><td> 564 </td><td> NON </td> 
</tr> 
<tr>© 

<td> de 130 a 140 km/h </td><td> 323 </td><td> NON </td> 
</tr> 
</tbody> 

<tbody class="bleu" al ign="center">© 
<tr>© 

<td> de 140 a 160 km/h </td><td> 223 </td><td> Amende </td> 
</tr> 
<tr>© 

<td> de 160 a 190 km/h </td><td> 87 </td><td> Retrait </td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 
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La figure 6-3 presente le resultat obtenu grace a ce code. On notera la separation nette des 
groupes qui y est operee a l'aide des couleurs et des bordures horizontales. 
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Figure 6-3 

t/n tableau avec en-tete, pied et deux groupes de donnees 



L' element <thead> permet de creer des titres de colonnes mais nous pouvons aussi envisa- 
ger de structurer le tableau pour que les titres soient en tete de ligne et non plus de colonnes. 
Pour cela, le premier element inclut dans chaque ligne creee avec <tr> doit etre <th> au 
lieu de <td>. Les elements <thead> et <tfoot> n'ont alors plus d'utilite. Lexemple 6-4 
reprend les donnees de l'exemple precedent en les reorganisant en lignes. Le tableau ne 
comprend plus que trois lignes (reperes O © et 0) dont le premier element inclut est un 
titre de ligne incorpore dans <th> (reperes ©, Q et 0). La structuration des donnees est 
done maintenant verticale. Nous pourrions appliquer des styles differents pour la pre- 
miere colonne, qui correspond aux elements <th>, et les colonnes suivantes, qui corres- 
pondent aux elements <td>. 

Exemple 6-4. Un tableau avec des titres de lignes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Tableau avec en-tete, pied et corps de donnees </title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 

<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 

</head> 

<body > 

<hl>Statistiques des controles radars sur 1 'autoroute A7</hl> 
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<table border="l" eel 1 spacing="3" cellpadding="10"> 
<tbody> 
<tr al ign="center">0 

<th> Vitesse mesuree en km/h </th>© 
<td> de 90 a 110 km/h </td> 
<td> de 110 a 130 km/h </td> 
<td> de 130 a 140 km/h </td> 
<td> de 140 a 160 km/h </td> 
<td> de 160 a 190 km/h </td> 
</tr> 

<tr al ign="center">© 

<th> Nombre de vehicules </th>© 
<td> 325 </td><td> 564 </td><td> 323 </td><td> 223 </td><td> 87 </td> 
</tr> 

<tr al ign="center">0 

<th> Sanctions operees</th>© 
<td>N0N</tdXtd>N0N</tdXtd>N0N</tdXtd>Amende</tdXtd>Retrait</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

La figure 6-4 presente la structure visuelle du tableau muni de titres de lignes. 
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Alignement du contenu des cellules 

Les attributs align et valign des elements <table>, <thead>, <tfoot>, <tbody>, <tr>, <td> et 
<th> permettent de definir l'alignement de leurs differents contenus. Comme tous ces ele- 
ments sont emboites les uns dans les autres, la definition de ces attributs a des niveaux 
differents implique des regies de priorite pour determiner laquelle des valeurs doit 
l'emporter. Ces regies sont les suivantes : 

• L'alignement defini dans un element inclut dans <td> ou <th> l'emporte sur celui de 
son parent. 

• L'alignement defini dans <td> ou <th> l'emporte sur celui de <tr>. 

• L'alignement defini dans <tr> l'emporte sur ceux de <thead>, <tfoot> ou <tbody>. 

• L'alignement defini dans <thead>, <tfoot> ou <tbody> l'emporte sur celui de <table>. 

L'exemple 6-5 nous permet de verifier les effets des attributs d'alignement du contenu 
des cellules. Dans l'element <tbody>, l'alignement est defini a gauche (repere ©). En pre- 
miere ligne, il est defini a droite dans l'element <tr> (repere ©) et doit l'emporter sur la 
valeur precedente, mais la premiere cellule contient une definition d'alignement justifie 
(repere ©), et c'est cette definition qui l'emporte sur celles de ses elements parents. Dans 
le second element <td>, l'alignement n'est pas defini explicitement (repere ©), et c'est 
celui de son element parent <tr> qui est applique et done le texte est aligne a droite. La 
premiere cellule de la deuxieme ligne a un contenu defini comme centre (repere 0) et le 
contenu de la seconde, n'ayant pas d'attribut al i gn (repere ©), est aligne selon la valeur 
de son parent <tr> qui lui-meme herite de l'alignement defini dans l'element <tbody> 
(repere ©)• Nous retrouverons souvent ces notions d'heritage dans les styles CSS. 

Exemple 6-5. Alignement du contenu des cellules 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Alignement du contenu des eel 1 ul es</titl e> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 

</head> 

<body> 

<table border="3" width="100£" cellpadding="12px" title="Alignement du texte"> 
<caption><big>Al ignement du contenu des cellules</big></caption> 
<tbody align="left">0 
<tr al ign="right">0 
<td align="justify" ©XpXbig>Texte justifie</bigXbr /> 

In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas</p> 
</td> 

<td>©<p><big>Texte aligne a droite</big><br /> 

In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas </p> 
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</td> 
</tr> 
<tr> 

<td al ign="center" 0XpXbig>Texte centreX/bigXbr /> 

In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas </p> 
</td> 

<td>@<pXbig>Texte aligne a gauche</big><br /> 

In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas </p> 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

La figure 6-5 montre les alignements obtenus dans Mozilla pour le code de l'exemple 6- 
5. L'alignement « justifie » n'est pas pris en compte par Explorer (pour compenser ce 
manque, voir la propriete CSS text-al ign). 
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Les groupes de colonnes 

Pour structurer l'information contenue dans un tableau, nous pouvons egalement creer 
des groupes de colonnes qui peuvent etre materialises a l'ecran en affichant uniquement 
leurs bordures, et non plus celles de toutes les cellules, en definissant les attributs frame et 
rules de l'element <table>. On cree des groupes de colonnes au moyen des elements 
<col group> et <col />. 

Ces elements possedent, outre les attributs communs et notamment id qu'il est utile de 
definir pour chaque groupe, les attributs specifiques suivants : 

• span="N" : il definit le nombre de colonnes du groupe. Sa valeur par defaut est 1. 

• width="N px | N T : definit la largeur de chaque colonne du groupe (et non pas de 
l'ensemble). Si elle est donnee en pourcentage, celui-ci se rapporte a la dimension 
de l'element parent <table>. 

En recourant a ces elements, on ne cree pas les colonnes elles-memes mais on les associe 
en un groupe semantique qui peut contenir une ou plusieurs colonnes. II faut imperative - 
ment definir les groupes dans l'element <table> avant les elements <tbody>, <thead> et 
<tfoot>. On distingue deux manieres de les mettre en oeuvre. 

Quand il est utilise seul, l'element <colgroup> permet de creer un groupe de colonnes 
identiques. On se sert de son attribut span pour indiquer le nombre de colonnes du groupe 
et de wi dth pour determiner la largeur commune de toutes les colonnes. L'exemple 6-6 en 
donne une illustration. Le tableau cree permet de proceder a l'affichage du recapitulatif 
d'une commande de livres. Le premier element <colgroup> ne contient qu'une seule 
colonne dont l'en-tete est la date du livre. Sa largeur est definie par l'attribut wi dth a 10 % 
de celle du tableau (repere O)- L'attribut span a ici explicitement la valeur 1, mais sa defi- 
nition n'est pas indispensable car il s'agit de la valeur par defaut. Le second groupe, qui 
utilise encore l'element <colgroup> seul, definit deux colonnes identiques de largeurs 
egales a 25 % de celle du tableau, en definissant l'attribut span a la valeur 2 (repere ©). 
Elles contiennent le titre et le nom de l'auteur. 

Pour creer un groupe de colonnes de dimensions differentes, il faut associer les elements 
<col group> et <col />. Le premier definit le groupe, son attribut i d permettant de l'identi- 
fier pour lui appliquer un style par exemple. Avec l'element <col />, qui est le seul enfant 
possible du precedent, on definit chaque colonne ou meme chaque sous-groupe de colon- 
nes identiques. Chacun de ces sous-groupes contient alors N colonnes en definissant 
l'attribut span="N". Leur largeur commune est indiquee en pixel ou en pourcentage dans 
l'attribut width. Pour creer plusieurs colonnes ayant chacune des caracteristiques diffe- 
rentes, nous devons inclure autant d'elements <col /> que nous desirons obtenir de sous- 
groupes et definir leurs attributs span et width de la meme facon. 

La creation de sous-groupes est illustree par l'exemple 6-6, dans lequel le troisieme ele- 
ment <colgroup> (repere ©) contient deux elements <col />. Le premier definit une 
colonne de largeur egale a 10 % de celle du tableau (repere OX et l e second deux colonnes 
de largeur egales a 15 % chacune (repere 0). 
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Les dimensions en pourcentage faisant reference a la largeur totale du tableau, il faut 
prendre la precaution de verifier que la somme de toutes les largeurs ne depasse pas 
100 %, sinon le navigateur risque d'afficher des resultats inattendus. 

Le tableau contient done trois groupes et un total de six colonnes dont les contenus sont 
donnes dans les elements <tr> et <td> (reperes © © et 0) inclus dans un element 
<tbody> (repere ©). 

Exemple 6-6. Creation de groupes de colonnes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Groupement de col onnes</titl e> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" title=""> 
.gras{font-weight:bold; background-color: red;} 
.prix{background-color: yellow;} 
.date {background -col or: //AAA; col or :bl ue; } 
</style> 
</head> 
<body> 

<table border="5" width="100%" rules="groups" summary="Facture de livres" 
cellpadding="5"> 

<caption><big>Facture de votre commande de 1 ivres</big></caption> 
<!-- Groupe 1 : Dates --> 

<colgroup id="date" width="10%" span="l" align="center" cl ass="date">© 

</col group> 

<!-- Groupe 2 : Titre et Auteur --> 

<colgroup id="titre" span="2" width="25£" align="left" cl ass="gras">© 
</col group> 

<!-- Groupe 3: Quantite, Prix unitaire, Prix total --> 
<colgroup id="prix" span="3" al ign="right" cl ass="prix">© 

<col width="10%" />0 

<col span="2" width="15%" />0 
</col group> 

<!-En-tete et pied du tableau --> 

<thead><tr><th>Date </th><th>Titre </th> <th>Auteur</th> <th>Quantite </th> 

<th>Prix Unitaire </th> <th>Prix Total </th> </tr> </thead> 
<tfoot><tr><th>Date </th> <th>Designation </th> <th>Auteur</th> <th>Quantite 
^ </th> <th>Prix Unitaire </th> <th>Prix Total </th> </trX/tfoot> 
<!-- Donnees du tableau --> 
<tbody>© 
<tr>0 
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<td>29/05/2005</td><td>XHTML Desi gn</td><td>Jef f rey Zel dman</td><td>3</td> 

<td>32.00 €</td><td>96.00 €</td> 
</tr> 
<tr>© 

<td>15/06/2005</td><td>CSS 2 </td><td>Raphael Goetter</tdXtd>2</td> 
<td>30.00 €</td><td>60.00 €</td> 
</tr> 
<tr>© 

<td>10/09/2005</td><td>XHTML et CSS </td><td>Jean Engel s</td><td>5</td> 
<td>29.90 €</tdXtd>149.50 €</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

Pour materialiser les groupes, des styles differents sont definis pour chacun d'eux. La 
figure 6-6 montre le resultat obtenu en tenant compte de ces styles. Les separations entre 
les differents groupes y apparaissent nettement 



3 Grojpcmcnt dc colonnes Microsoft Internet Explorer f-~||W|f5<i 



Ad^x |^ httrJi/yfrinft^COrT^W v|HOK * Norton Viti'.f^ \fr ~ 



Fartiire ds voire roinmfindr fie livres 



Date 






Quautire 


Prix L'niraire 


Prii Total 


^^^^^ 






3 


33 00S 


96 00f 


15 06 :oo? 








30.00 « 


60.00 i 


10 09 2005 








29 90S 


14».50€ 










PHv U»ir»!r« 


Prii Total 



Figure 6-6 

Les groupes de colonnes 



Creer des tableaux irreguliers 

Les tableaux que nous venons de creer ont tous une structure reguliere, toutes les lignes 
et toutes les colonnes ayant le meme nombre de cellules. Ce type de presentation peut se 
reveler contraignant, particulierement quand le contenu de plusieurs cellules adjacentes 
est varie, puisqu'elles peuvent contenir aussi bien du texte que des elements de type bloc 
ou de type en ligne comme des images occupant une grande surface. Pour creer des 
tableaux a structure irreguliere, il faut fusionner des cellules voisines comme nous pouvons 
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le faire dans un tableur. On precede a cette fusion en utilisant les attributs col span et 
rowspan des elements <td> et <th>. 

Comme la creation d'une mise en page de site, celle de tableaux irreguliers doit etre pre- 
ceded d'un travail sur le papier. II faut tracer au prealable un quadrillage base sur le plus 
grand nombre de lignes et de colonnes virtuelles necessaires dans le tableau final. II faut 
ensuite tracer les cellules qui vont etre fusionnees pour obtenir 1' aspect desire. II faudra 
egalement verifier que le comptage final des cellules des colonnes et des lignes est bien 
constant, sachant que, dans ce decompte, la fusion de deux colonnes ou lignes compte 
pour deux cellules, meme si elles n'en forment plus qu'une visuellement. 

Ce type d'organisation dans le travail preparatoire est necessaire pour que l'ecriture du 
code soit facile a realiser. 



Fusion de colonnes 

On precede a la fusion de cellules d'une meme ligne en definissant la valeur de l'attribut 
col span d'un element <td> ou <th> avec un entier, lequel indique le nombre de cellules a 
fusionner en partant de la gauche. La syntaxe a suivre pour fusionner N cellules est la 
suivante : 

| <td col span="N"> Contenu de la cellule</td> 

Si nous considerons le code de l'exemple 6-7 et le resultat obtenu a la figure 6-7, nous 
constatons que le tableau a potentiellement cinq colonnes, comme le montre la ligne 
deux creee avec cinq elements <td> (repere ©). 

Dans la premiere ligne (repere ©), les cellules des colonnes un et deux sont fusionnees 
ainsi que celles des cellules quatre et cinq en ecrivant col span="2" (reperes Q et ©). Entre 
les deux se trouve une cellule ordinaire (repere @). II y a bien un total de cinq colonnes 
virtuelles (2+1 + 2). 

La deuxieme ligne (repere 0) qui ne realise aucune fusion a cinq colonnes definies par 
autant d'elements <td> (reperes a ©), la premiere et la derniere s'alignant bien avec 
celles de meme position dans la ligne precedente. 

Dans la troisieme ligne (repere ©), l'attribut col span est utilise dans le deuxieme element 
<td> (repere ©) et done les cellules des colonnes 2, 3 et 4 sont fusionnees en une seule. 
La premiere et la derniere cellules sont normales (reperes © et ©). II y a egalement un 
total de cinq colonnes virtuelles dans cette ligne (1+3+1). 

Exemple 6-7. Fusion de colonnes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Fusion de colonnes</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
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< 1 ink rel ^"shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" title=""> 

td {background-color:lightblue;} 
</style> 

</head> 

<body> 

<table border="2" cellspacing="5" eel 1 paddi ng=" 15 "> 
<tr align="center">© 

<td col span="2"Xbi g> Colonnes 1 et 2 fusionnees </bigX/td>© 
<td><big> Colonne 3 </bigX/td>© 

<td colspan="2"Xbig> Colonnes 4 et 5 fusionnees </bigX/td>0 

</tr> 

<tr al ign="center">© 

<td><big> Colonne 1 </bigX/td>© 
<td><big> Colonne 2 </bigX/td>© 
<td><big> Colonne 3 </bigX/td>© 
<td><big> Colonne 4 </bigX/td>© 
<td><big> Colonne 5 </bigX/td>© 

</tr> 

<tr al ign="center">© 

<td><big> Colonne K/bigX/td>© 

<td col span="3"Xbig> Colonnes 2, 3 et 4 fusionnees </bigX/td>© 
<td><big> Colonne 5</bigX/td>© 

</tr> 
</table> 
</body> 
</html> 



Figure 6-7 

La fusion 
des colonnes 
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Un cas particulier de fusion de colonnes 

Dans certains cas de mise en page de tableau, la notion precedente de colonnes virtuelles 
prend tout son sens car, dans aucune ligne, nous ne voyons apparaitre ce nombre de colon- 
nes, mais uniquement un des diviseurs de ce nombre. Supposons par exemple que nous 
souhaitions realiser le tableau represente a la figure 6-8. II est compose d'une colonne a la 
premiere ligne, de deux a la deuxieme, et ainsi de suite jusqu'a la quatrieme ligne. 
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Figure 6-8 

Un tableau tres irregulier 



II faut que notre tableau ait virtuellement douze colonnes (soit le plus petit multiple 
commun a 2, 3 et 4) pour pouvoir obtenir des divisions de ce type. L' exemple 6-8 per- 
met de creer ce tableau. Dans la premiere ligne, nous definissons l'attribut col span avec 
la valeur 12 pour fusionner nos douze cellules virtuelles afin d' obtenir une cellule uni- 
que (repere Q). Dans la deuxieme, cet attribut prend la valeur 6 pour obtenir deux 
colonnes (reperes Q et ©). La troisieme ligne opere la fusion des colonnes par quatre 
en ecrivant colspan="4" pour en obtenir trois visuellement (reperes ©, et ©), et la 
derniere fusion est faite par groupe de trois colonnes avec le code col span="3" pour en 
obtenir quatre (reperes Q, ©, Q et ©). 

Exemple 6-8. Fusion des cellules virtuelles 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 



Creer des tableaux 



Chapitre 6 



<title>Fusion de colonnes</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" title=""> 
td (background-color:lightblue;} 
</style> 
</head> 
<body> 

<table border="2" cellspacing="2" width="90r> 
<!-- Ligne 1 --> 
<tr align="center"> 
<td colspan="12"Xbig> Colonnes 1 a 12 f usionnees</td>© 
</tr> 

<!-- Ligne 2 --> 
<tr align="center"> 
<td colspan="6"Xbig> Colonnes 1 a 6 fusionnees</td>© 
<td colspan="6"Xbig> Colonnes 6 a 12 fusionnees</td>© 
</tr> 

<!-- Ligne 3 --> 
<tr al ign="center"> 
<td colspan="4"Xbig> Colonnes 1 a 4 fusionnees</td>© 
<td colspan="4"Xbig> Colonnes 4 a 8 fusionnees</td>© 
<td colspan="4"Xbig> Colonnes 8 a 12 fusionnees</td>© 
</tr> 

<!-- Ligne 4 --> 
<tr align="center"> 
<td colspan="3"Xbig> Colonnes 1 a 3 fusionnees </td>© 
<td colspan="3"Xbig> Colonnes 4 a 6 fusionnees </td>© 
<td colspan="3"Xbig> Colonnes 7 a 9 fusionnees </td>© 
<td colspan="3"Xbig> Colonnes 10 a 12 fusionnees </td>© 
</tr> 
</table> 
</body> 
</html> 

Cet exemple montre l'importance de la preparation graphique qui doit etre realisee avant 
le codage XHTML afin de creer des fusions opera tionnelles de maniere rigoureuse. En 
observant bien la figure 6-8, nous pouvons remarquer que les colonnes de la meme ligne 
n'ont pas toujours la meme largeur. Ce probleme pourra etre resolu en appliquant les 
proprietes CSS de dimensionnement aux differentes cellules du tableau. 



La fusion de lignes 

La fusion de cellules situees dans les lignes adjacentes peut etre definie a l'aide de l'attri- 
but rowspan des elements <td> et <th>. II a pour valeur le nombre de cellules a fusionner. 
La fusion doit etre declaree dans la cellule la plus haute. Sa syntaxe est done la suivante : 

<td rowspan="N"> Contenu de la cellule</td> 
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Ici encore, la phase de conception sur le papier doit permettre d'effectuer un decompte 
des cellules virtuelles, sachant que nous devons en retrouver un nombre egal pour chaque 
colonne. Comme nous l'avons deja mentionne, la creation des tableaux donne la priorite 
aux lignes sur les colonnes et est faite ligne apres ligne en incluant des elements <tr>. La 
fusion de lignes demande une plus grande attention que celle des colonnes. En effet, le 
fait d'ecrire par exemple rowspan="3" dans un element <td>, implique que, dans les deux 
elements <tr> qui suivent, il doit y avoir une definition de cellule de moins par rapport au 
nombre total de colonnes. Dans le meme element <td> ou <th>, il est possible d'inclure 
simultanement les attributs col span et rowspan pour realiser la fusion de lignes et de 
colonnes. 

Pour creer par exemple le tableau represente a la figure 6-9, il faut ecrire le code de 
1' exemple 6-9. 
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Figure 6-9 

La fusion de cellules de lignes adjacentes 



Exemple 6-9. Fusion de lignes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Fusion de colonnes</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

<style type="text/css" title=""> 
td (background-color:lightblue;} 

</style> 
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</head> 
<body> 

<table border="2" cellspacing="5" width="100%" eel 1 paddi ng=" 10" > 
<!-- Ligne 1 --> 
<tr align="center">© 

<td rowspan="4"Xbig> Lignes 1 a 4 fusionnees</bigX/td>© 
<td><big>Ligne 1 Colonne 2</bigX/td>© 
<td><big>Ligne 1 Colonne 3</bigX/td>© 
<td><big>Ligne 1 Colonne 4</bigX/td>© 
</tr> 

<!-- Ligne 2 --> 
<tr al ign="center">© 
<td ><big>Ligne 2 Colonne 2</bigX/td>© 

<td colspan="2" rowspan="2"Xbig>Lignes 2 et 3 fusionnees : Colonnes 3 et 4 
fusionnees</bigX/td>© 

</tr> 

<!-- Ligne 3 --> 
<tr al ign="center">© 
<td><big>Ligne 3 Colonne 2</bigX/td>© 
</tr> 

<!-- Ligne 4 --> 
<tr al ign="center">© 
<tdXbig>Ligne 4 Colonne 2 </bigX/td>© 
<td><big>Ligne 4 Colonne 3</bigX/td>© 
<td><big>Ligne 4 Colonne 4 </bigX/td>© 
</tr> 
</table> 
</body> 
</html> 

Dans la premiere ligne du tableau (repere ©), nous creons la fusion des quatre cellules de 
la premiere colonne (repere ©) puis nous creons les trois colonnes suivantes de cette 
ligne (reperes ©, © et ©). A ce stade, nous savons done deja que les elements <tr> sui- 
vants ne doivent plus contenir qu'un maximum de trois elements <td>. 

Dans la deuxieme ligne (repere ©), nous creons d'abord une cellule normale qui corres- 
pond a la deuxieme colonne (repere ©), puis la suivante qui est la fusion des colonnes 3 
et 4 avec le code col span="2" et la fusion des lignes 2 et 3 avec le code rowspan="2" (repere ©). 
La cellule obtenue contient done quatre cellules virtuelles. La troisieme ligne (repere ©) ne 
contient done plus qu'un seul element <td> (repere ©), les autres cellules de la meme 
ligne ayant ete declarees implicitement dans les elements <tr> et <td> precedents. Quant 
a la quatrieme ligne (repere ©), elle contient trois elements <td> correspondant aux 
colonnes 2, 3 et 4 (reperes ©, © et ©). 
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Imbrication de tableaux 

Chaque element <td> ou <th> inclut dans une ligne peut lui-meme contenir un element 
<tabl e> comme nous l'avons mentionne au tableau 6-2. Cela permet d'inclure un nouveau 
tableau dans une cellule d'un premier tableau, ce qui entraine une imbrication de tableau. 

Le tableau cree a l'exemple 6-10 illustre cette possibility nous permettant d'afficher un 
calendrier, represents a la figure 6-10. Ce dernier comporte quatre cellules virtuelles 
principales, reparties en deux groupes (repere ©), celles de la premiere colonne etant 
fusionnees pour n'en former qu'une contenant l'annee dans un element <th> (repere ©). 
La deuxieme cellule de la premiere ligne contient le nom du mois dans un second ele- 
ment <th> (repere ©). La deuxieme cellule de la deuxieme ligne va contenir le calendrier 
proprement dit. Celui-ci est cree dans un nouveau tableau, constitue de sept lignes et de 
sept colonnes. Un second element <tabl e> est done inclut dans la derniere cellule du pre- 
mier tableau (repere 0). La premiere ligne de ce tableau contient le nom des jours 
(repere ©), et les suivantes les dates (reperes ©, © ©, © et ©). 

Exemple 6-10. Imbrication de tableaux 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Tableaux inclus l'un dans 1 'autre</title> 

< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
</head> 
<body> 

<!-- Premier tableau --> 
<table border="4"> 

<caption><strong> Calendrier Octobre 2005 </strong></caption> 

<colgroup span="l" width="15VX/colgroup>© 

<colgroup span="l" width="85VX/colgroup>© 

<tbody> 

<tr al ign="center"> 

<th rowspan="2" ><hl> 2 <br /> <br /> <br /> 5 <br /> </hlX/th>© 

<th valign="middle"Xh2>OCT0BRE</h2X/th>© 
</tr> 

<tr al ign="center"> 
<td> 

<!-- Deuxieme tableau --> 
<table border="5">© 
<tbody> 

<tr align="center">© 
<th>Lun</th> 
<th>Mar</th> 
<th>Mer</th> 
<th>Jeu</th> 
<th>Ven</th> 
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<th>Sam</th> 
<th>Dim</th> 
</tr> 

<tr al ign="center">© 

<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td>K/td> 
<td>2</td> 
</tr> 

<tr al ign="center">0 

<td>3</td> 
<td>4</td> 
<td>5</td> 
<td>6</td> 
<td>7</td> 
<td>8</td> 
<td>9</td> 
</tr> 

<tr al ign="center">© 

<td>10</td> 
<td>ll</td> 
<td>12</td> 
<td>13</td> 
<td>14</td> 
<td>15</td> 
<td>16</td> 
</tr> 

<tr al ign="center">© 

<td>17</td> 
<td>18</td> 
<td>19</td> 
<td>20</td> 
<td>2K/td> 
<td>22</td> 
<td>23</td> 
</tr> 

<tr al ign="center">(E) 

<td>24</td> 
<td>25</td> 
<td>26</td> 
<td>27</td> 
<td>28</td> 
<td>29</td> 
<td>30</td> 
</tr> 

<tr al ign="center">© 
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<td>3K/td> 

<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td></td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 



La figure 6-10 montre le resultat obtenu. 
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Organisation d'une page a I'aide de tableaux 

Dans les annees 1990, la tendance en matiere de creation de sites etait de structurer les 
pages au moyen de tableaux utilises en tant que grille contenant les differentes parties de 
la page. L'utilisation de tableaux couplee a la definition de leur largeur en pourcentage a 
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l'aide de l'attribut width peut permettre d'obtenir un tableau qui occupe par exemple 
toute la largeur d'une page, quelle que soit la definition de l'ecran du poste client. Afin de 
rendre les pages plus attractives et que le visiteur ne percoive pas la grille generee par 
l'element <table>, on utilise souvent comme astuce la definition de son attribut border a 
la valeur 0, ce qui rend les bordures des cellules invisibles. De nombreux sites utilisent 
encore ces principes. A titre d'experience, rendez-vous sur le site www.amazon.fr et affi- 
chez-en le code source (Affichage>Code source dans Mozilla par exemple), puis enregis- 
trez-le et ouvrez ce fichier dans votre editeur XHTML. Cherchez ensuite tous les ele- 
ments <table> (Search>Find dans EditPlus par exemple) et remplacez la valeur de 
l'attribut border par la valeur 1 ou 2. Vous pourrez constater, outre la non-conformite du 
code source a XHTML, 1' usage abusif des tableaux dans cette page (pas moins de 43 ele- 
ments <table> !) uniquement dans le but d'organiser la presentation de la page. Tentez 
ensuite les memes operations sur le site www.eyrol 1 es.com, strictement conforme a la DTD 
XHTML 1.0, et comparez le nombre d'elements <tabl e>. Vous n'en trouverez qu'un seul. 
II s'agit bien la de deux politiques radicalement differentes, reconnaissons-le. Chacun 
choisira la sienne, mais je l'espere en connaissance de cause, apres la lecture de ce livre, 
oil vous constaterez dans la deuxieme partie qu'il est parfaitement possible de se passer 
de la mise en page systematique a l'aide de tableaux. Les figures 6-11 et 6-12 montrent la 
page d'accueil du site www.amazon.fr, sans bordures de tableaux et avec une bordure de 1 
pixel ensuite, ce qui met en evidence tous les tableaux inclus dans la page. 
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Figure 6-11 

j/te www.amazon.fr sans bordures de tableaux 
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Figure 6-12 

Le iiYe www.amazon.fr avec des bordures de tableaux 



Nous allons cependant presenter cette possibilite de travail en soulignant que 1' utilisation 
conjointe de divisions <div> et de proprietes CSS de positionnement et de dimensionne- 
ment presente des solutions aux problemes de mise en page. 

La presentation choisie est simple et divise la page en quatre zones distinctes, a savoir 
un bandeau contenant le titre general du site, une zone de menu situee sur la gauche, 
une zone principale afhchant le contenu au centre et enfin une zone de liens utiles 
situee a droite. L' aspect final est presente a la figure 6-13. Le tableau incluant tous ces 
elements est plutot simple car il ne contient que six cellules virtuelles. Les elements 
<col group> et <col /> permettent de dimensionner les trois colonnes de largeurs respec- 
tives de 15 % pour le menu, 70 % pour le contenu et 15 % pour les liens (reperes O 0, 
@ et ©). Ces largeurs sont donnees en pourcentage de celle du tableau qui occupe 
toute la largeur de la fenetre du navigateur car l'attribut width de l'element <table> a la 
valeur 100 X. 

Les trois cellules de la premiere ligne (repere 0) sont fusionnees pour n'en former 
qu'une seule, contenant le titre du site dans un element <hl> (repere ©). 

La deuxieme ligne (repere 0) contient les trois cellules principales (reperes 0, © et 
©). La cellule de gauche du menu (repere 0) comporte une liste a puces des liens 
vers les differentes pages du site (repere 0), qui abordent les sujets preferes des web- 
mestres. 
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La cellule centrale (repere ©) affiche un titre general (repere ©), deux sous-titres suivis 
chacun d'une division incluant le contenu redactionnel de la page d'accueil (reperes © et 
© puis © et ©). 

La cellule de droite (repere ©) contient une liste de liens utiles. 

Exemple 6-11. Mise en page a I'aide de tableau 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Mise en page a I'aide de tableaux</title> 
<meta name="Author" content="Jean ENGELS" /> 

<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
</head> 
<body> 

<table border="0" width="100%" eel 1 spacing="15px" cellpadding="5"> 

<!--Definition de largeurs des colonnes --> 

<colgroup>© 

<col span="l" width="15r />© 

<col span="l" width="70r />© 

<col span="l" widths" 15%" />© 
</col group> 

<!-- Premiere ligne --> 
<tr al ign="center">© 
<td colspan="3"Xhl>XHTML 1.1 et CSS 2.1</hlXhr /X/td>© 
</tr> 

<!-- Deuxieme ligne--> 
<tr valign="top">© 
<!-- Premiere colonne --> 
<td>© 
<ul>© 

<li><h2Xa id="xhtml" href="xhtml .html " tabindex="l" accesskey="X" title=" 

La page XHTML 1.1">XHTML 1.1 </aX/h2X/li> 
<liXh2Xa id="css" href="css . html " tabindex="2" accesskey="A" title=" 

La page CSS 2.1">CSS 2.1 </aX/h2X/li> 
<liXh2Xa id="js" href="javascript.html " tabindex="3" accesskey="J" title=" 

La page JavaScript">JavaScript </aX/h2X/li> 
<liXh2Xa id="php" href="php.html " tabindex="4" accesskey="P" title=" 

La page PHP 5">PHP 5 </aX/h2X/li> 
<liXh2Xa id="mysql" href="mysql . html " tabindex="5" accesskey="B" title=" 

La page MySQL 5">MySQL 5 </aX/h2X/li> 
<liXh2Xa id="sqlite" href="sql i te. html " tabindex="6" accesskey="S" title=" 
i» La page SQLite">SQLite </aX/h2X/li> 
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<HXh2Xa id="xml" href ="xml . html " tabindex="7" accesskey="D" title=" 

La page XML">XML </aX/h2X/H> 
</ul> 
</td> 

<!-- Deuxieme colonne --> 
<td al ign=" justify ">© 

<h2>Utilisez les standards du Web </h2>© 

<h3>XHTML l.K/h3>© 

<div> L'adoption des standards du Web devient un prealable a la creation de 
sites modernes et accessibles a tous avec XHTML et CSS. L'adoption des 
standards du Web devient un prealable a la creation de sites modernes et 
accessibles a tous. L'adoption des standards du Web devient un prealable 
a la creation de sites modernes et accessibles a tous . . . 

</div>© 

<h3>CSS 2.1</h3>© 

<div> L'adoption des standards du Web devient un prealable a la creation de 
sites modernes et accessibles a tous L'adoption des standards du Web devient 
un prealable a la creation de sites modernes et accessibles a tous. 
L'adoption des standards du Web devient un prealable a la creation de sites 
modernes et accessibles a tous . . . 

</div>© 

</td> 

<!-- Troisieme colonne --> 
<td align="left">© 

<a href="mailto:xhtml@funhtml .com">Contact </a><br /Xbr /> 
<a href="funhtml .com/xhtml "> Reference XHTML 1.1 </a><br /Xbr /> 
<a href="funhtml .com/css"> Reference CSS 2.1 </a><br /Xbr /> 
<a href="w3.org"> Le site du W3C</aXbr /Xbr /> 
<a href="eyrol 1 es . com"> La librairie Eyrol 1 es</a><br /Xbr /> 
</td> 
</tr> 
</table> 
</body> 
</html> 

La figure 6-13 donne le resultat obtenu pour cette mise en page. Dans un but pedago- 
gique, nous n'avons envisage qu'une mise en page simple ne comportant que quatre 
zones, mais sur le meme principe il est evidemment possible de creer davantage de cellules 
et d'operer des regroupements de colonnes plus complexes. 

Nous pouvons des a present constater que 1' aspect visuel de la page est des plus pauvres. 
Le code de cette page est en effet purement XHTML et remplit bien la fonction qui lui est 
assignee de structurer 1' information. Les seules informations de redimensionnement sont 
faites dans l'attribut wi dth des elements <tabl e> et <col />. En respectant uniquement les 
recommandations XHTML 1 . 1 , il est impossible de faire mieux. En effet, aucun attribut 
ne permet de definir une couleur pour le fond ou le texte, ni la taille des caracteres, et 
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Figure 6-13 
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chacun d'entre nous, maintenant convaincu de l'utilite de separer le contenu et la presen- 
tation, ne peut que s'en rejouir car la structuration du contenu de la page est bien realisee 
en quatre zones distinctes. 

Une presentation plus esthetique ne peut etre obtenue qu'en utilisant des styles CSS 
appliques aux differents elements du code XHTML de cet exemple. Nous verrons par la 
suite comment appliquer des styles aux elements de tableau ou a leurs contenus (voir la 
deuxieme partie). De plus, le type de presentation de la page en trois colonnes pourra etre 
obtenu sans meme avoir a utiliser de tableau, simplement en positionnant les differentes 
divisions de la page (voir le chapitre 13) d'une maniere plus souple et moins lourde au 
niveau du code. 

En conclusion, il n'est pas dans mes intentions de deconseiller systematiquement 
l'emploi des tableaux, mais plutot de faire comprendre que leur emploi doit etre reserve 
a des situations specifiques comme la structuration de donnees numeriques pour lesquel- 
les ils sont particulierement destines. Si vous n'avez pas l'idee d'ecrire une lettre de 
motivation et votre CV avec un tableur Excel ou OpenOffice (meme si e'est potentielle- 
ment realisable), vous n'utiliserez pas non plus un tableau pour structurer vos pages web 
en emboitant de multiples tableaux les uns dans les autres. 
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Exercices 

Exercice 1 : Citez tous les elements specialises utilisables pour la creation des tableaux 
et leur ordre d' apparition dans le code XHTML. 

Exercice 2 : Peut-on inclure un tableau dans les elements <body>, <f orm> ou <td> ? 

Exercice 3 : Creez un tableau compose de quatre lignes et de cinq colonnes. 

Exercice 4 : Creez un tableau de 600 pixels de large contenant cinq lignes et trois colonnes 
avec des bordures de 4 pixels, un espacement entre cellules de 10 pixels. Seules les 
bordures verticales doivent s'afficher. 

Exercice 5 : Construisez un tableau statistique ayant un en-tete, un pied de page et deux 
corps de donnees. N'affichez que les bordures horizontales des groupes de donnees. 
Centrez le contenu des cellules de donnees et alignez a gauche les titres de 1' en-tete et du 
pied de page. 

Exercice 6 : Creez un tableau compose de sept colonnes et de cinq lignes avec des 
bordures verticales de groupes. Les colonnes sont organisees en groupe. Le premier 
groupe a deux colonnes de 100 pixels chacune, le deuxieme trois colonnes de 150 pixels 
et le troisieme deux colonnes de 50 pixels et une de 100 pixels. 

Exercice 7 : Creez le tableau suivant en fusionnant les colonnes. 
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10 




12 


13 


14 


Exercice 8 : Creez le tableau suivant en fusionnant les lignes. 
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10 
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12 





Exercice 9 : Creez un tableau selon le modele suivant. 



2 3 

7 8 

11 12 

14 



5 
15 



10 
13 
16 
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Exercice 10 : Creez un tableau selon le modele suivant. 



1 


2 3 


4 


5 


6 


7 


8 




9 


10 


11 12 


13 


Exercice 11 


Creez un tableau selon le modele suivant. 
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Exercice 12 : Creez un tableau selon le modele suivant en utilisant la notion de cellules 
virtuelles. 
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Exercice 13 : A partir d'un tableau de deux lignes et de deux colonnes, fusionnez les 
deux cellules inferieures. Inserez dans les deux cellules superieures des tableaux de deux 
lignes et cinq colonnes, puis dans la cellule inferieure un tableau de trois lignes et six 
colonnes selon le modele suivant. 
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S'inscrire dans une mailing-list, laisser son avis dans un livre d'or, saisir un mot-cle dans 
un moteur de recherche ou passer une commande en ligne, toutes ces actions aujourd'hui 
devenues tres courantes pour nombre d'entre nous mais ne sont possibles que grace a 
l'existence des formulaires inseres dans une page web. Tout echange de donnees entre un 
visiteur (le poste client) et l'ordinateur hebergeant le site (le serveur), opere via le proto- 
cole HTTP, se fait done via les saisies effectuees dans un formulaire. L'utilisateur peut 
entrer des textes ou des mots de passe, operer des choix grace a des boutons radio, de 
cases a cocher ou des listes de selection. II peut egalement effectuer le transfert de ses 
propres fichiers vers le serveur, par exemple sur les sites proposant le tirage de photogra- 
phies numeriques par correspondance. Les formulaires sont done presents dans un tres 
grand nombre de sites. Nous allons aborder dans ce chapitre les elements XHTML qui 
permettent de creer la structure et les differents composants des formulaires. Nous 
etudierons egalement quelques notions relatives a la recuperation des donnees cote 
serveur a l'aide de scripts PHP. 

Structure d un formulaire 

Les elements constitutifs d'un formulaire doivent etre contenus entre les balises <form> et 
</form>. Comme il s'agit d'un element de niveau bloc, il peut etre inclus directement 
dans l'element <body>. Le tableau 7-1 presente la liste exhaustive de ses elements parents. 
L'element <f orm> peut contenir entre autres des elements de titre, des blocs (mais jamais 
<f orm>), des listes et l'element <f i el dset> pour structurer son contenu. Aucun des compo- 
sants de formulaire que nous allons etudier dans ce chapitre ne peut etre inclus directement 
dans l'element <form>, et il faut d'abord y inclure un autre element. 
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Le tableau 7-2 presente la liste de tous ses elements enfants. 

Tableau 7-1. Les elements parents de I'element <form> 

blockquote, body, dd, del, div, fieldset, ins, li, map, noscript, object, td, th 

Tableau 7-2. Les elements enfants de I'element <form> 

address, blockquote, del, div, dl, fieldset, hi, h2, h3, h4, h5, h6, hr, ins, noscript, ol, p, pre, script, table, ul 



L' element <fieldset> est tres souvent inclus dans un formulaire. II a pour vocation de 
delimiter les groupes de composants actifs du formulaire. D'un point de vue graphique, 
chaque groupe de composants est delimite par defaut, dans les navigateurs, par une bor- 
dure mince dans laquelle il est possible d'integrer un titre pour chaque groupe. Chaque 
titre est le contenu d'un element <legend> inclus dans <fieldset>. L'effet obtenu pour un 
formulaire a deux groupes est presente a la figure 7-1. Chaque groupe peut contenir des 
titres, des blocs, des listes et des elements de type en ligne parmi lesquels figurent ceux 
qui creent les composants actifs propres aux formulaires. L' element <f i el dset> peut avoir 
comme contenu une grande variete d'elements dont la liste est donnee au tableau 7-3. 

Tableau 7-3. Les elements enfants de I'element <fieldset> 

Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, dl, em, fieldset, 
form, M, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, legend, map, noscript, object, ol, p, pre, q, samp, 
script, select, small, span, strong, sub, sup, table, textarea, tt, ul, var 

Le code XHTML de la structure d'un formulaire est done de la forme presentee dans 
l'exemple 7-1. 

Exemple 7-1. Structure d'un formulaire 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Formulaire de base</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<form method="post" action="traitement.php"> 
<fieldset> 
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<legend>Formulaire 
<!-- Composants du 
</fieldset> 
</form> 
</body> 
</html> 

Les attributs de /'element <form> 

L' element <form> possede l'ensemble des attributs communs (id, title, class, 
xml:lang, dir et les gestionnaires d'evenements de base). Nous ne manquerons pas 
d'utiliser systematiquement l'attribut id pour identifier le formulaire dans une page 
qui peut en compter plusieurs, ainsi que l'attribut title pour ameliorer l'accessibilite 
du site. 

En supplement de ses attributs communs desormais bien connus, l'element <f orm> possede 
les attributs propres suivants : 

• action : cet attribut est obligatoire car il designe le fichier qui est charge de traiter les 
donnees du formulaire cote serveur. Je recommande particulierement l'emploi du lan- 
gage PHP pour ecrire les scripts de traitement de ces donnees, d'autres solutions, JSP 
et ASPNet par exemple, peuvent egalement etre envisagees. Le code du script de trai- 
tement des donnees peut etre inclus dans un fichier separe de celui qui contient le code 
XHTML mais il peut etre inclus dans ce meme fichier qui doit alors avoir une exten- 
sion appropriee a la place de .html (par exemple, . php pour le langage PHP ou .aspx 
pour ASPNet). De plus, dans ce cas, comme nous l'avons indique au chapitre 2, la 
declaration XML doit etre supprimee. La structure initiale de la page est alors celle de 
l'exemple 2-2. Le contenu de l'attribut action doit done etre une URL, qui peut etre 
relative, de la forme : 

<form action="trai tement.php"> 

Dans ce cas, le fichier designe doit etre present dans le meme repertoire que le fichier 
XHTML. L'URL peut egalement etre absolue, que le fichier soit present sur le meme 
serveur, ou meme sur un autre serveur. Elle est alors de la forme suivante : 

<form action="http://www.monsite.com/scripts/traitement.php"> 



type</l egend> 
formulaire --> 



Traitement par le fichier lui-meme 

Si le script de traitement est incorpore dans le fichier XHTML, nous pouvons utiliser du code PHP pour 
designer le fichier lui-meme. En cas changement de nom du fichier, il n'y a ainsi rien a modifier. 
Pour realiser cette operation, il convient d'ecrire le code suivant : 



<form action="<?= $_S ERV ER[ ' PH P_S ELF'] ?>"> 
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L'attribut action peut aussi avoir la valeur mailto: qui provoque l'envoi des donnees 
(leur nom et leur valeur) a une adresse e-mail qu'il faut preciser a la suite du mot-cle 
mailto:, par exemple : 

<form method="post" action="mai"lto:xhtml@funhtnil .com"> 

Pour que la transmission vers une adresse e-mail ait lieu, il faut que l'attribut method 
soit utilise et qu'il ait la valeur post. La soumission du formulaire provoque le demar- 
rage du logiciel de courrier sur le poste du visiteur, et celui-ci doit approuver l'envoi 
comme celui d'un e-mail habituel. Cette methode interdit tout traitement informatique 
des donnees sur le serveur et nous ne l'utiliserons pas systematiquement ici. Elle peut 
cependant avoir l'avantage de rendre possible la transmission instantanee d' informa- 
tions a une personne et ce, quel que soit l'endroit oil elle se trouve. Cela n'est pas a 
negliger pour creer un contact rapide entre un client et un commercial itinerant par 
exemple, s'il est dote d'un terminal portable pouvant recevoir des e-mails. 

• method : il determine la methode d'envoi des donnees vers le serveur. II peut prendre 
les deux valeurs get ou post. La methode get est celle qui est utilisee par defaut (si 
nous ne definissons pas explicitement l'attribut method). Elle presente l'inconvenient 
d'ajouter les donnees du formulaire sous la forme nom=val eur a la suite de l'URL defi- 
nie dans l'attribut acti on. Si, par exemple, le formulaire contient deux champs de saisie, 
le premier nomme prenom dans lequel est saisie la valeur jean et un second nomme nom 
avec la saisie engels, l'URL affichee dans la barre d'adresse du navigateur sera la 
suivante : 

http://www.funhtml . com/fichier.php?prenom=jean&nom=engels 

Remarquons que les donnees sont precedees du point d'interrogation (?) et separees 
l'une de l'autre par le caractere esperluette (&). Les donnees transmises sont done visi- 
bles par l'utilisateur, mais peuvent aussi etre plus facilement interceptees par des per- 
sonnes mal intentionnees. De plus, la quantite de caracteres de l'URL est limitee, ce 
qui pose un probleme pour l'envoi de commentaires longs par exemple. En revanche, 
il est possible de contourner cet inconvenient en passant directement des donnees a un 
script, en les ajoutant a une URL. Elles sont alors traitees par le fichier designe dans 
l'URL et peuvent declencher l'affichage d'une page particuliere creee dynamiquement 
a partir de ces informations. En tapant par exemple 1' adresse suivante : 

http://www.eyrol 1 es.com/ I nformati que/ Recherche/index. php?q=php+5&themes=INF 

l'utilisateur se trouve sur une page, comme s'il avait effectue une recherche avec 
le mot-cle php 5 et la rubrique INF dans la page d'accueil du site www.eyrol 1 es .com. 

La seconde valeur de l'attribut method est post. Elle ne presente pas l'inconvenient de 
la methode get car les donnees transmises sont invisibles dans l'URL, et leur longueur 
n'est plus limitee. C'est done celle que nous recommandons dans la plupart des cas. 

• id : nous y revenons ici car il permet d' identifier le formulaire pour pouvoir acceder 
a ses composants a partir d'un script JavaScript avec par exemple la methode get- 
ElementByld(id) que nous avons deja utilisee. 
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• enctype : il determine le type d'encodage de donnees transmises vers le serveur. Sa 
valeur par defaut est application/x-www-form-url encoded ; elle est applicable dans la 
plupart des cas, sauf pour le transfert de fichiers du poste client vers le serveur. Dans 
ce cas, l'attribut doit prendre la valeur multipart/form-data. Quand nous utilisons la 
valeur mail to: pour l'attribut action, la valeur de enctype doit etre text/pl ain ou text/ 
html , ce qui dependra de l'encodage de l'e-mail (texte brut ou XHTML). 

• accept : il contient un ou plusieurs types MIME de la forme text/html , image/jpeg, qui 
correspond au type des fichiers acceptes pour les operations de transfert de fichiers 
vers le serveur. Cela evite d'effectuer un controle du type des fichiers transferes cote 
serveur. Chaque type indique doit etre separe du precedent par une virgule. Les 
fichiers de type non liste dans cet attribut seraient ainsi refuses. 

• accept-charset : il contient un ou plusieurs jeux de caracteres admis pour les saisies 
effectuees dans les champs du formulaire. Par defaut, la valeur est la meme que celle 
definie dans la declaration XML ou l'attribut <meta /> (voir le chapitre 2). 

• onsubmi t : il permet de gerer l'evenement qui survient quand l'utilisateur clique sur le 
bouton d'envoi des donnees de type submit (voir l'element <input />). II peut etre uti- 
lise pour effectuer un controle de validite des saisies, par exemple verifier qu'un code 
postal comporte cinq chiffres, un numero de telephone dix chiffres, ou la syntaxe 
d'une adresse e-mail. 

• onreset : permet de gerer l'evenement qui survient quand l'utilisateur efface en bloc 
toutes les saisies realisees en cliquant sur le bouton de type reset (voir les sections 
suivantes). 

Les composants communs 

Quel que soit le role que Ton assigne a un formulaire, questionnaire ou bon de com- 
mande par exemple, il doit comporter certains elements obligatoires et au minimum un 
bouton d'envoi. 

Bouton d'envoi et de reinitialisation 

Le bouton d'envoi, generalement nommes Envoi ou OK, est indispensable car il est le 
seul qui, apres un clic, peut declencher l'envoi des donnees vers le serveur ou vers un 
e-mail. La maniere la plus courante de creer un bouton d'envoi est d'utiliser l'element 
<input/> que nous allons retrouver dans tous les paragraphes suivants car ses effets 
sont tres divers. C'est son attribut type qui permet de lui assigner une fonction parti- 
culiere. Pour un bouton d'envoi (on dit aussi de soumission du formulaire), l'attribut 
type prend la valeur submit. L'element <input /> etant vide, c'est le contenu de l'attri- 
but val ue qui permet de determiner le texte du bouton. Sa valeur est recuperee cote ser- 
veur au meme titre que les donnees du formulaire. II est possible de creer plusieurs 
boutons d'envoi et de gerer differemment les donnees en fonction du bouton choisi. 
Cet element possede 1' ensemble des attributs communs et nous ne manquerons pas 
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d'utiliser systematiquement id et title. En supplement de id, nous pouvons definir 
l'attribut name, qui sert egalement a identifier le bouton d'envoi dans les scripts JavaScript 
ou PHP, en lui donnant la meme valeur. Pour ameliorer l'accessibilite, nous pouvons 
aussi definir les attributs accesskey et tabindex . Le code creant un bouton d'envoi courant 
peut done etre le suivant : 

<form> 
<fieldset> 

<input type="submit" val ue="Envoi " name="soumission" id="soumission" tabindex="5" 
accesskey="E" title="Bouton d'envoi "/> 
</fieldset> 
</form> 

La figure 7-1 (repere Q) niontre le resultat obtenu par ce code. 

L'effet visuel obtenu est assez spartiate et il sera possible d'ajouter des couleurs de fond 
et de texte ainsi que des bordures pour ces boutons en ecrivant des styles CSS (voir les 
proprietes color et background-color au chapitre 10 et border au chapitre 11). Pour creer 
un bouton d'envoi, il est egalement possible de recourir a l'element <button>. Pour ce 
faire, on definit son attribut type avec la valeur submit. Son attribut value contient la 
valeur associee au bouton. Comme l'element <input />, il possede les attributs name, 
accesskey, tabindex. Le texte visible sur le bouton est le contenu de l'element et non pas 
la valeur de l'attribut val ue. II peut egalement s'agir d'une image, ce qui enrichit beau- 
coup les possibilites graphiques par rapport a l'element <i nput />. Pour creer ce type de 
bouton d'envoi, nous ecrivons le code suivant : 

<fieldset> 

<button type= "submit" value="Envoi2" name="soumission2" id="soumission2" 

accesskey="B" title="Bouton d'envoi"> Envoi2 
</button> 
</fieldset> 

La figure 7-1 (repere ©) montre un bouton d'envoi dont le contenu est textuel. Pour creer 
un bouton utilisant le meme element avec une image pour contenu, nous pouvons ecrire 
le code suivant : 

<fieldset> 

<button type="submit" value="Envoi3" name="soumission3" id="soumission3" 
b »accesskey="C" title="Bouton d'envoi"> 
<img src="france2.gif" height="50" width="50" alt="France"/> 
</button> 
</fieldset> 

La figure 7-1 (repere ©) montre ce type de bouton contenant une image. 

Quand ces effets decoratifs sont insuffisants, il est envisageable de creer des boutons 
d'envoi avec des images. La premiere des possibilites est fournie par l'element <i nput /> 
dont l'attribut type prend la valeur image. 
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Le fichier image, de type GIF, JPEG ou PNG, doit etre reference avec l'attribut src 
comme il en va pour une image creee avec 1' element <img />. Le bouton a les dimensions 
de l'image et celles-ci ne peuvent pas etre modifiees avec les attributs de l'element <i nput />. 
Comme il s'agit avant tout d'une image, nous disposons de l'element alt qui contient un 
texte de substitution qui s'affiche a la place de l'image si elle n'est pas trouvee dans les 
navigateurs uniquement textuels. Comme pour les images sensibles au clic et divisees en 
zones, il est possible d'utiliser une carte definissant ces zones avec des elements <map> et 
<area />. Nous devons alors referencer cette carte a l'aide de 1'attribut usemap qui contient la 
valeur de l'attribut id de l'element <map> precede du caractere diese (#). Les attributs id, 
title, accesskey et tabindex sont egalement utilises de la meme facon que pour un bouton 
de type submit. S'il est employe, l'attribut val ue ne fournit plus le texte visible, mais une 
valeur recuperable par les scripts. Pour creer un bouton a partir d'une image, nous pouvons 
ecrire le code suivant : 

<form> 
<fieldset> 

<input type="image" src=". ./images/france.gif" val ue="Envoi3" name="soumission3" 
id="soumission3" tabindex="6" accesskey="A" title="Bouton d'envoi image" 
oncl ick="submit( ) "/> 
</fieldset> 
</form> 

La figure 7-1 (repere ©) montre un exemple de ce type de bouton graphique. 

Ce type de bouton graphique a la particularite de permettre la transmission au serveur 
non seulement des donnees saisies dans le formulaire, mais aussi des coordonnees du 
point sur lequel a ete effectue le clic dans l'image. Ces coordonnees (exprimees en pixel) 
sont transmises dans les variables nom.x ou nom_x selon le serveur (pour l'abscisse) et 
nom.y ou nom_y (pour l'ordonnee) dans lesquelles le prefixe nom represente la valeur 
de l'attribut name du bouton. L'origine des coordonnees est le sommet superieur gauche de 
l'image. 

On associe souvent a un bouton d'envoi un bouton de reinitialisation. II n'efface pas le 
contenu de toutes les zones de saisies mais remet le formulaire dans son etat initial, y 
compris les valeurs par defaut qui ont pu y etre definies. Un tel bouton est le plus souvent 
cree a l'aide de l'element <input /> dont l'attribut type a la valeur reset. Comme les bou- 
tons d'envoi, c'est l'attribut value qui contient le texte visible sur le bouton. Les autres 
attributs sont identiques a ceux des boutons d'envoi. Nous pouvons creer un bouton 
d'envoi avec le code suivant : 

<form> 
<fieldset> 

<input type="reset" val ue="Effacement" name="efface"/> 
<fieldset/> 
<form/> 
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L'utilisation de l'element <button> est possible pour creer des boutons de reinitialisation 
en definissant son attribut type grace a la valeur reset. En incluant une image comme 
pour les boutons d' envoi precedents, nous pouvons aussi creer des boutons graphiques. 
Cependant, l'element <input /> avec un attribut type ayantla valeur image ne peutpas etre 
utilise pour creer un bouton de reinitialisation. 

L'exemple 7-2 resume la creation de ces differents types de boutons. 

Exemple 7-2. Creation de boutons d'envoi et de reinitialisation 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les boutons d'envoi</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<form action="exemple7-2post.php" method="post" name="formull"> 
<fieldset> 
<hl>Les boutons d'envoi : </hl> 

<h2>Avec input <input type="submit" val ue="Envoi " name="soumission" id= 
"soumission" tabindex="5" accesskey="E" title="Bouton d'envoi" /X/h2>© 

<h2>Avec button et du texte : <button type= "submit" val ue="Envoi2" 

name="soumission2" id="soumission2" accesskey="B" title="Bouton d'envoi"> 
Envoi2</button>© 

</h2> 

<h2>Avec button et une image : 

<button type="submit" value="Envoi3" name="soumission3" id="soumission3" 

accesskey="C" title="Bouton d'envoi "> 
<img src= " . ./images/france2.gif " height^ "50" width= "50" alt= "France"/> 
</button>© 

</h2> 

<h2>Avec input et une image : <input type="image" src=" .. /images/ 

france.gif"value="Envoi4" name="soumission4" id="soumission4" tabindex="6" 
accesskey="D" title="Bouton d'envoi image" onclick="submit()"/>© 

</h2> 

<hl>Les boutons de reinitialisation : </hl> 

<h2>Avec input : <input type="reset" val ue="Ef f acement" name="efface"/X/h2>@ 
<h2>Avec button et du texte : <button type= "reset" val ue="eff ace2" 

name="ef f ace2" id="efface2" accesskey="G" title="Bouton d'effacement"> 

Effacement</buttonX/h2>© 
<h2>Avec button et une image : <button type= "reset" val ue="eff ace3" 

name="ef f ace3" id="efface3" accesskey="H" title="Bouton d'effacement"> 
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<img src= ". ./images/france2.gif " height= "50" width= "50" alt= "France"/> 
</button>© 

</h2> 

</fieldset> 
</form> 
</body> 
</html> 

La figure 7-1 represente tous les types de boutons d'envoi, les boutons de reinitialisation 
ayant le meme aspect. 
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Les composants de saisie de texte 

Le texte constitue le plus souvent la part la plus importante des saisies effectuees dans un 
formulaire. Selon les besoins, il peut s'agir d'un texte court tenant sur une ligne, mais il 
est egalement possible d'envisager la saisie de textes beaucoup plus longs. 



La saisie de texte uniligne 

Un formulaire permet le plus souvent la saisie de texte, par exemple pour indiquer son 
nom ou son adresse e-mail. Chacun a pu rencontrer ce type de composants, ne serait-ce 
que pour entrer un mot-cle dans un moteur de recherche comme Google. Comme dans 
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l'ancestral langage Basic, dans lequel une entree de l'utilisateur se fait par l'instruction 
i nput, en XHTML un grand nombre de champs de saisie sont crees avec l'element <i nput />. 
C'est son attribut type qui determine la categorie de champ qui est obtenue. Pour un 
champ de saisie de texte ne comprenant qu'une ligne, 1' attribut type prend la valeur text. 
Comme il est necessaire de preciser a l'utilisateur le type d'information attendue, il faut 
introduire le libelle de 1' information dans un element <1 abel >. Ce dernier peut contenir a 
son tour d'autres elements qui peuvent permettre de structurer son contenu. Le tableau 7-4 
presente la liste de ces elements enfants. 

Tableau 7-4. Les elements enfants de <label> 

Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, label, map, 
object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var 



Pour avertir l'internaute qu'il doit saisir son nom, nous ecrivons par exemple : 

<form> 

<label>Votre nom :</label><input type= "text" /> 
<form> 

L'element O'nput /> possede l'ensemble des attributs communs. Nous pouvons en ame- 
liorer la gestion en utilisant ses attributs particuliers. 

• name="texte" : il attribue un nom a la zone de saisie, ce qui permet de recuperer dans 
une variable la valeur saisie sur le serveur. En utilisant PHP pour recuperer les donnees 
saisies dans le formulaire, si l'attribut name a la valeur nom, le nom indique par l'inter- 
naute est contenu dans la variable $_P0ST["nom"] si l'attribut method de l'element <form> 
a la valeur post ou dans la variable $_GET["nom"] s'il a la valeur get. En JavaScript, la 
valeur saisie est accessible dans la variable document. forms[l]. nom. value si la page ne 
contient qu'un seul formulaire (remplacez forms [1] par forms[2] pour le deuxieme 
formulaire eventuel, et ainsi de suite). 

• size="N" : il permet de fixer la longueur visible de la zone de texte a N caracteres, ce 
qui n'empeche pas des saisies plus longues. 

• maxl ength="N" : il permet de limiter le texte saisi a N caracteres. Au-dela de ce nombre, 
les frappes effectuees au clavier sont inoperantes. Cet attribut peut permettre de mettre 
en adequation la longueur d'une donnee avec celle du champ d'une base de donnees 
dans laquelle elle doit etre enregistree. 

• val ue=" texte" : il definit un texte par defaut qui est affiche dans la zone de texte tant que 
l'utilisateur n'en a pas saisi un autre. C'est cette valeur qui est transmise au serveur si 
l'internaute ne modifie rien dans le champ texte. Comme dans l'exemple ci-apres : 

<input type="text" name="pays" maxlenght="25" val ue="France" /> 

Si rien n'est change dans la zone, c'est la valeur France qui est envoyee au serveur. 
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Effacement de la valeur par defaut 

Pour des raisons d'ergonomie, il est preferable que le texte par defaut defini a I'aide de I'attribut val ue 
s'efface tout seul au moment ou I'utilisateur clique dessus car cela lui evite d'avoir a le faire lui-meme. 
II suffit pour cela d'utiliser une instruction JavaScript tres simple : 
Pour reagir a I'evenement die : 

<input type="text" name="prenom" value="Votre prenom" maxl ength="25" 
oncl i ck="thi s . value=" '" /> /> 

Pour que le texte s'efface des que la zone regoit le focus (au moyen de la touche de tabulation par 
exemple) : 

<input type="text" name="adresse" val ue="Votre adresse" maxl ength="60" 
onfocus="this. valuer' ' " /> 



• disabled="disabled" : cet attribut, qui prend la valeur booleenne unique disabled, rend 
la zone de saisie inactive, empechant ainsi toute saisie. 

• readonly="readonly" : permet d'utiliser une zone de saisie pour africher une information. 
Celle-ci ne peut done pas etre modifiee, mais est en lecture seule. 

• onchange="Script" : ce gestionnaire d'evenements permet de declencher un script 
JavaScript quand la valeur par defaut contenue dans I'attribut value est modifiee. Le 
code est execute soit quand I'utilisateur passe a une autre zone de saisie, soit lors de 
1' envoi. Nous avons par exemple le code suivant : 

<input type="text" name="pays" value="Votre pays" maxl ength="20" 
| onchange="al ert( 'Modification operee')" /> 

Comme pour les boutons d'envoi, il est possible d'utiliser les attributs accesskey, tabin- 
dex, pour ameliorer l'accessibilite, et onfocus ou onbl ur pour gerer l'attribution ou la perte 
du focus a la zone de texte. L' exemple 7-3 cree plusieurs zones de saisie de texte (reperes ©. 
0, Q et 0). Elles sont toutes precedees d'un libelle contenu dans un element <label> 
(reperes 0, ©, et 0). Le formulaire se termine comme il se doit par un bouton 
d'envoi (repere ©). Le traitement des donnees, realise en PHP, est confie dans I'attribut 
action au fichier externe nomme exemple 7-4. php dont le code est presente plus bas. II 
permet simplement d'afficher dans une nouvelle page, l'ensemble des donnees saisies 
apres 1' envoi du formulaire. 

Exemple 7-3. Les champs de saisie de texte 

<?xml version="1.0" encodi ng="i so-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Saisie de texte</titl e> 
<link rel ^"shortcut icon" type="images/x-icon" href=" . ./images/favicon.ico" /> 
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</head> 
<body> 

<form method="post" action="exemple7-4.php" >0 
<fieldset> 

<legend>Vos donnees personnel 1 es</l egend> 

<label>Nom : </label>@<input type="text" name="nom" maxl ength="25" /> 
<br /Xbr />© 

<1 abel >Prenom : </label>0<input type="text" name="prenom" value="Votre prenom" 

maxlength="25" onclick="this.value="" /Xbr /Xbr />0 
<1 abel >Adresse : </label>@<input type="text" name="adresse" value= 

"Votre adresse" maxl ength="60" onfocus="this.value=' '" /Xbr /Xbr />© 
<label>Pays : </label>©<input type="text" name="pays" val ue="Votre pays" 

maxlength="20" onchange="alert( 'Modification operee')" /Xbr /Xbr />© 
<input type="submit" name="envoi" val ue="Envoyer"/>© 
</fieldset> 
</form> 
</body> 
</html> 

La figure 7-2 montre 1' aspect visuel du formulaire obtenu. Remarquons que sa presenta- 
tion n'est pas du meilleur effet, en raison des longueurs variables des contenus des ele- 
ments <1 abel > qui entrainent le decalage horizontal des zones de texte. Mais une fois de 
plus, il ne s'agit que de creer une structure, et c'est bien ce qui est realise, et notre travail 
en XHTML est done bien fait. Pour ameliorer cet aspect visuel, nous pourrons utiliser un 
tableau comme nous le verrons a la fin de ce chapitre ou encore appliquer des styles CSS 
aux differents elements (voir le chapitre 14). 
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Le code de l'exemple 7-4 permet simplement l'affichage du nom de la variable corres- 
pondant a l'attribut name de chaque composant, et la valeur que lui a donnee le visiteur. 
II permet aussi de realiser des tests si vous disposez d'un serveur PHP. 

Exemple 7-4. Le code PHP de traitement des donnees 

<?php 

echo "<hl>Lecture des donnees </hl>"; 
foreach($_POST as $cle=>$valeur) 
{ 

echo "$cle : $valeur <br />"; 

} 

?> 



La saisie de mot de passe 

Les champs de saisie de mot de passe sont quasi identiques aux champs de saisie de 
texte. lis ne comportent qu'une seule ligne et sont crees avec le meme element <i nput />. 
La differentiation entre ces deux champs reside dans la valeur de l'attribut type qui prend 
la valeur password au lieu de text. Pour l'utilisateur le champ a le meme aspect visuel, 
mais quand il tape son mot de passe, les caracteres qu'il utilise ne sont pas affiches dans 
la zone et sont remplaces par un asterisque (*), ce qui le protege des regards indiscrets. 
On retrouve ce type de champ dans tous les sites d'acces reserve, comme les pages 
d'accueil des webmails qui permettent la lecture des courriers electroniques, sans faire 
appel a un logiciel comme Outlook ou Mozilla. Les attributs sont les memes que pour un 
champ de texte. Nous definissons de preference les attributs s i ze= " N " pour limiter la taille 
de la zone visible a N caracteres et maxl enght="N" pour limiter le mot de passe a N carac- 
teres. Notez encore la difference entre ces deux attributs car size n'empeche pas la saisie 
d'un nombre superieur de caracteres a la taille visible du champ alors que maxl enght blo- 
que la saisie a exactement N caracteres, les frappes suivantes etant ignorees quelle que 
soit la largeur du champ. Dans les navigateurs modernes, la soumission d'un formulaire 
contenant au moins un champ de saisie de mot de passe entraine l'apparition d'un mes- 
sage d'alerte demandant au visiteur s'il veut memoriser son mot de passe pour ne pas 
avoir a le retaper lors d'une prochaine visite sur le meme site. La figure 7-3 montre le 
modele de fenetre obtenue dans Mozilla. 
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L'exemple 7-5 cree un formulaire contenant simplement un champ de texte pour saisir un 
login (repere ©) et un champ password (repere ©) pour le mot de passe, chacun etant 
precede d'un label explicatif (reperes © et ©). 



Exemple 7-5. Saisie de mot de passe 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Saisie de texte</title> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
</head> 
<body> 

<form method="post" action="exemple7-4.php" > 
<fieldset> 

<legend><big>Acces reserve: donner vos login et mot de passe</big></legend> 
<label> Login : </label>© 

<input type="text" name="nom" maxl ength="8" />© 
<label> Mot de passe : </label>© 

<input type="password" name="code" maxl ength="8" /Xbr />© 
<input type="submit" val ue="Envoyer"/> 
</fieldset> 
</form> 
</body> 
</html> 

La figure 7-4 montre le formulaire obtenu. 



Figure 7-4 

Un formulaire 
de saisie de mot 
de passe 



Saisie de texte - Mozilla 



Fichier Edition Affichage A[ler a Marque-pages Outils Fenetre A[de 



C 



Precedent Suivant Actualiser 



39^ http://www.funhtm v 



1 rHk 

Rechercher 

' Imprimer 



■ Acces reserve: dormer vos login et mot de passe- 
Login : a zertyui Mot de passe : ******** 



Envoyer 



Creer des formulaires 



Chapitre 7 



La saisie de texte long 

L' element <i nput /> ne permet la saisie que sur une seule ligne avec peu de visibilite pour 
les textes longs. Pour permettre a un visiteur la saisie de textes beaucoup plus longs, 
comme des commentaires elogieux sur votre site par exemple, ou d'une maniere plus 
actuelle dans les blogs, nous disposons d'un element specialise. Comme l'element <i nput /> 
dote de l'attribut type="text", l'element <textarea> cree un champ de saisie de texte sur 
plusieurs lignes. Contrairement au precedent, ce n'est pas un element vide et son contenu 
n'est autre que le texte saisi par le visiteur. II est possible de determiner un contenu pour 
l'element dans le code de la page XHTML. Ce texte sera alors visible dans la zone de saisie 
et permettra de donner une information a l'utilisateur. 

Les dimensions de la zone de saisie doivent obligatoirement etre definies. Pour cela, il 
faut utiliser les attributs suivants : 

• col s="N" qui fixe la largeur de la zone a N caracteres. Le retour a la ligne est automatique 
dans la zone. 

• rows="N" qui fixe la hauteur a N lignes. II faut distinguer la hauteur visible et le nombre 
de lignes que Ton peut saisir. En effet, le visiteur peut ecrire autant de lignes qu'il le 
souhaite, quelle que soit la hauteur visible de la zone. Quand le texte depasse la capa- 
cite de la zone, une barre de defilement vertical apparait automatiquement. L'attribut 
name, s'il n'est pas reellement obligatoire, est fortement conseille pour pouvoir identi- 
fier le champ cote serveur et lire son contenu dans une variable (en PHP, dans les 
variables $_POST["nom-du-champ"] ou $_GET["nom-du-champ"] selon la methode d'envoi 
des donnees). 

Comme pour les zones de saisie uniligne, il est recommande d'effacer automatiquement 
le contenu par defaut de l'element au moyen d'un script JavaScript en reponse a l'evenement 
onfocus en ecrivant le code suivant : 

] onfocus="this.value=' '" 

L'attribut onbl ur est egalement associe a l'element pour gerer la perte du focus. 

En plus des attributs communs, l'element <textarea> possede les attributs gestionnaires 
d'evenements particuliers, a savoir onselect et onchange. Le premier permet de gerer 
l'evenement qui survient quand l'utilisateur selectionne une partie du texte contenu 
dans l'element. Le second correspond a l'evenement survenant quand le texte contenu dans 
l'element a ete modifie. Cependant, pour gerer cet evenement, il faut noter qu'il ne se 
produit reellement que quand la zone a perdu le focus et pas a 1' instant meme ou son 
contenu est modifie. Pour rendre plus aisee l'accessibilite, nous n'oublierons pas d'utili- 
ser systematiquement les attributs accesskey et tabindex. L'element <textarea> possede 
enfin les attributs disabled et readonly dont la definition avec les valeurs respectives disa- 
bled et readonly rend le champ texte inactif et le transforme en une simple zone d'affi- 
chage d' informations. Cette faculte est souvent utilisee pour afficher les termes d'un contrat 
ou les conditions de vente sur un site de e-commerce. 
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Le code de l'exemple 7-6 cree un formulaire complet de saisie permettant a un visiteur de 
faire des commentaires apres s'etre identifie avec un login. Le premier champ est une 
zone de texte uniligne dans laquelle il doit saisir son nom (repere ©). Le deuxieme est 
cree a l'aide de l'element <textarea> et permet la saisie des commentaires proprement 
dits (repere ©). Ses dimensions sont fixees a 70 caracteres en largeur et 10 lignes en hau- 
teur (reperes Q et 0). Enfin, nous retrouvons les indispensables boutons submit et reset 
(reperes et 0). Chaque composant est precede d'un element <label> de structuration 
de l'information au lieu d'un simple texte, qui permettra d'ameliorer la presentation du 
formulaire a l'aide de CSS appliquees separement aux elements <1 abel > d'une part et 
<input /> ou <textarea> d'autre part. A titre indicatif, le code de l'exemple 7-4, etudie 
precedemment, contient le code PHP permettant la recuperation des valeurs du formu- 
laire, et les afficher dans une nouvelle page. 

Exemple 7-6. Creation de zone de saisie de texte sur plusieurs lignes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Saisie de texte sur plusieurs lignes</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<form action="exemple7-4.php" method="post"> 
<fieldset> 

<legend><big>Donnez-nous vos impressions</big></legend> 
<label>Votre nom </label><input type="text" name="nom" size="25" 

tabindex="l" /Xbr />© 
<label>Vos commentai res</l abel > 

<textarea name="commentai res" cols="7O"0 rows="lO"0 onfocus="this.value=' '" 

tabindex="2">© 
Tapez vos commentaires i c i ... 
</textarea><br /> 

<input type="submit" value="Envoi de vos commentaires" />0 
<input type="reset" value=" Effacer tout" /Xbr />0 
</fieldset> 
</form> 
</body> 
</html> 



La figure 7-5 montre le formulaire obtenu. 
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Les boutons radio et les cases a cocher 

Les zones de texte permettent a l'internaute de saisir du texte, ce qui offre une infinite de 
reponses possibles. Cela correspond bien a la saisie du nom ou de l'adresse e-mail. Pour 
les donnees dont les reponses sont previsibles et en nombre limite, nous pouvons inclure 
des elements de formulaire speciaux, nommes boutons radio et cases a cocher. Un bouton 
radio se presente sous la forme d'un cercle dans lequel apparait un disque noir quand 
l'utilisateur clique dessus pour effectuer un choix. Les boutons radio sont typiquement 
utilises pour presenter plusieurs choix dont la reponse est unique (par exemple, un choix 
entre un bouton libelle Homme et un bouton libelle Femme). Pour creer un bouton radio, 
nous utilisons encore une fois l'element <i input /> avec un attribut type qui prend la 
valeur radi o. L' ensemble des boutons radio avec lesquels on peut operer un choix donne 
constitue un groupe. II faut que tous ses elements aient la meme valeur pour leurs attri- 
buts name. L' attribut val ue de chaque bouton radio contient la valeur que Ton veut asso- 
cier a chacun d'eux. Seule la valeur choisie dans le meme groupe est recuperee par le ser- 
veur. L' attribut checked qui prend la valeur booleenne unique checked permet de cocher 
par defaut un des boutons d'un groupe, par exemple, s'il est plus repandu que les autres. 
Rien n'empeche cependant le visiteur de modifier le bouton indiquant la valeur proposee. 
En revanche, l'attribut readonly bloque le bouton radio et impose ainsi une valeur. Son 
utilite ne peut se limiter a rappeler une valeur obligatoire. L'attribut disabled dont la 
valeur unique est disabled permet de rendre un bouton radio inactif. Nous pouvons 
envisager de l'utiliser pour desactiver un choix realise anterieurement. En tant qu' ele- 
ment pouvant recevoir le focus, un bouton radio possede bien sur les attributs gestion- 
naires d'evenements onfocus (quand le bouton recoit le focus) et onbl ur (quand il le perd). 
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Pour ameliorer l'accessibilite, nous ne negligeons pas, pour notre part, les attributs ti tl e, 
accesskey, et tabindex. Le code de creation d'un groupe de boutons radio est le suivant : 

<form action="exemple7-4.php" method="post"> 
<fieldset> 

<label>Monsieur</label> <input type="radio" name="sexe" value="Monsieur" 
*»checked="checked" /> 

<1 abel >Madame</l abel > <input type="radio" name="sexe" val ue="Madame" /> 
</fieldset> 
</form> 

Pour les questions qui n'appellent qu'une reponse unique, comme dans l'exemple prece- 
dent sur le sexe de la personne, les boutons radio sont les composants ideaux. En revan- 
che, si vous realisez un questionnaire sur les gouts musicaux de vos visiteurs, rien ne les 
empeche d' aimer a la fois le rock, le classique et la chanson francaise ou d'autres encore 
(si ! c'est possible). Les cases a cocher representent alors la meilleure solution. 

Elles se presentent graphiquement sous la forme de petits carres dans lesquels apparait 
une coche en V si l'utilisateur du formulaire choisit la valeur associee a la case. Le fonc- 
tionnement parait identique aux boutons radio a la difference que les cases a cocher ne 
font pas partie d'un groupe, et qu'il est possible d'operer plusieurs choix dans des cases 
differentes sans que le choix precedent se trouve decoche. Dans ce cas, il faut creer autant 
de cases a cocher que de choix suggeres. Une case a cocher est encore creee a l'aide de 
l'element <input /> dont l'attribut type prend cette fois la valeur checkbox. Les attributs 
name de chacune des cases se doivent alors de porter des noms differents. C'est encore 
l'attribut value, dont la definition est ici indispensable, qui contient la valeur associee a 
chaque case, qui sera recuperee cote serveur apres 1' envoi du formulaire, uniquement si 
la case est cochee. L'element utilise etant vide, il faut l'associer a un element <1 abel > 
pour preciser le choix demande. Le nom de chaque element etant different, l'attribut 
value associe a chacun d'entre eux peut avoir une valeur de type booleen de la forme 
« oui » ou « non » car seules les valeurs des cases choisies sont transmises au serveur. 
Les attributs checked, disabled, title, accesskey et tabindex qui ont le meme role que les 
boutons radio peuvent etre utilises dans les memes conditions. Les gestionnaires d'eve- 
nements onfocus, onblur, onchange et onselect sont aussi utilisables de la meme facon. 
Le code de creation d'une case a cocher peut done etre le suivant : 

<label>Classique : </l abel > 

<input type="checkbox" name="cl assique" tabindex="l" accesskey="G" value="oui" /> 

L'exemple 7-7 permet de mettre en oeuvre ces composants pour obtenir des renseigne- 
ments divers de la part d'un visiteur. II contient un premier groupe de boutons radio per- 
mettant de determiner la civilite de la personne (reperes Q © et ©). II est complete par 
une zone de saisie de texte pour le nom de la personne (repere ©). Le second groupe per- 
met d'illustrer par une image chaque bouton radio dans un element <1 abel > (reperes 0, 
et ©). Un paragraphe contient ensuite un ensemble de cinq cases a cocher pour offrir 
un choix de gouts musicaux (reperes 0, 0, ©, © et ©). Chaque case a un nom different 
et la valeur oui qui lui est associee ne sera recuperee cote serveur que si le visiteur la 
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coche. Le formulaire est complete par les boutons d'envoi et de reinitialisation (reperes © 
et ©). 

Exemple 7-7. Boutons radio et cases a cocher 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Saisie de texte sur plusieurs lignes</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<form action="exemple7-4.php" method="post"> 
<fieldset> 

<legend><big>Quelques rensei gnements </big></legend> 
<!--Civilite--> 

<1 abel >Mr</l abel > <input type="radio" name="sexe" val ue="Monsieur" 

checked="checked" tabindex="l" />© 
<1 abel >Me</l abel > <input type="radio" name="sexe" val ue="Madame" 

tabindex="2" />© 

<1 abel >M1 1 e</l abel > <input type="radio" name="sexe" value="Mademoiselle" 

tabindex="3" />© 
<!--Nom --> 

<label>Nom </label><input type="text" name="nom" size="25" tabindex="4" /> 

<br /Xbr />© 
<!-- Pays --> 

<1 abel >France : <img src=". ./images/drapeaufr.gif" alt="France" /X/labelXinput 
type="radio" name="pays" tabindex="5" accesskey="A" />   @ 

<1 abel >A1 1 emagne : <img src=". ./images/drapeaud.gif" al t="Al 1 emagne" /> 
</label><input type="radio" name="pays" tabindex="6" accesskey="B" /> 
   © 

<label>Italie : <img src=". ./images/drapeauit.gif" alt="Italie" /X/labelXinput 
^» type="radio" name="pays" tabindex="7" accesskey="C" />© 
<!-- Gouts --> 

<p>Vos gouts musicaux : <br /> 

<1 abel >C1 assi que : </label><input type="checkbox" name="cl assique" tabindex="8" 
^» accesskey="D" />© 

<label> Chanson frangaise : </label><input type="checkbox" name="chanson" 

tabindex="9" accesskey="E" />© 

<1 abel > Rock : </l abel Xi nput type="checkbox" name="rock" tabindex="10" 

accesskey="G" />© 

<label> Pop : </label><input type="checkbox" name="pop" tabindex="ll" 

accesskey="H" /> © 

<label> Rap : </label><input type="checkbox" name="rap" tabindex="12" 

accesskey="K" />© 
</p> 

<br /Xinput type="submit" value="Envoi de vos commentai res" />© 



Le langage XHTML 

Partie I 



<input type="reset" value=" Effacer tout" /Xbr />© 
</fieldset> 
</form> 
</body> 
</html> 

La figure 7-6 illustre le resultat obtenu pour ce formulaire. 
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Les listes de selection 

Un autre moyen de faciliter la saisie de donnees par un visiteur de votre site consiste a lui 
proposer d'effectuer un ou plusieurs choix parmi une liste de selection deroulante pou- 
vant contenir un grand nombre d'elements. Ces listes peuvent etre utilisees quand l'even- 
tail des reponses est previsible, comme une liste de pays ou de types de carte bancaire. 
Elles sont connues de tous car on les rencontre dans tous les logiciels bureautiques pour 
selectionner 1' extension sous laquelle on veut enregistrer un fichier. La valeur associee a 
chaque option etant contenue dans le code XHTML, cette methode a l'avantage d'eviter 
les erreurs d'orthographe que pourraient faire les differents utilisateurs. Si les informa- 
tions sont stockees dans une base de donnees, cela evitera de stacker des valeurs differen- 
tes alors qu' elles correspondent en realite a la meme information. Une liste de selection 
est creee avec l'element <select>. En soi, cet element n'entraine aucun rendu visuel, il 
n'est que le conteneur de la liste. II doit done inclure ensuite autant d'elements <option> 
qu'il y a de choix proposes au visiteur. La structure XHTML d'une liste de selection 
prend alors la forme suivante : 

<select name="pays" size="l"> 
<option val ue="France"> France</option> 
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<option value="Belgique"> Belgique</option> 
<option val ue="Sui sse"> Suisse</option> 
<option val ue="Canada"> Canada</option> 
</select> 

Le choix de la premiere option est important car il definit la valeur par defaut qui sera 
transmise au serveur si elle n'est pas modifiee. L'element <select> possede l'ensemble 
des attributs communs parmi lesquels nous retiendrons principalement id et class, 
d'usage courant. II possede egalement les attributs propres suivants : 

• name="texte" : il permet, comme pour les autres elements de formulaire, de recuperer la 
ou les donnees choisies par le visiteur dans une variable qui est identifiee par ce nom. 

• size="Nombre" : il definit le nombre de lignes d'options qui sont visibles lors de l'affi- 
chage de la liste. Par defaut, seule la premiere option definie dans le code est visible. 
Les autres ne le sont que si l'utilisateur deroule la liste en cliquant dessus. 

• mul ti pi e="mul ti pi e" : il prend la valeur booleenne unique mul ti pi e pour indiquer que 
l'utilisateur peut operer plusieurs choix simultanement dans la liste. Pour ce faire, ce 
dernier est oblige de maintenir la touche Ctrl enfoncee pour que le second choix 
n'annule pas le premier. Cette faculte n'etant pas tres connue de la majorite des inter- 
nautes, je conseille de l'eviter, sans compter qu'elle correspond peu a l'idee que se fait 
la plupart des usagers d'une liste deroulante. Si son usage s'avere utile, il faut bien 
signaler la procedure a suivre. Quand cet attribut est defini et que Ton utilise un ser- 
veur PHP, les valeurs choisies sont recuperees dans un tableau, et il faut pour toutes les 
recuperer que le nom de la liste soit suivi de crochets ouvrant et fermant (par exemple : 
name="nom[]"). 

• tabindex="Nombre" : pour attribuer un ordre de tabulation a la liste et la rendre active 
avec la touche de tabulation. 

• di sabl ed="di sabl ed" : pour rendre la liste inactive. Aucun choix n'est plus alors possible. 

• onfocus="script" et onblur="script" : pour gerer respectivement les evenements produits 
par 1' attribution et la perte du focus a la liste. 

• onchange="script" : pour gerer l'evenement qui survient quand la valeur selectionnee 
par defaut est modifiee par l'utilisateur. 

Nous avons deja signal e que le choix de la premiere option de la liste est important. En 
effet, si nous n'utilisons pas l'attribut multiple, elle est la seule visible tant que Ton ne 
deroule pas la liste, et surtout elle constitue la valeur par defaut qui est transmise au ser- 
veur si le visiteur n'effectue pas un autre choix. Pour cette raison, je conseille d' attribuer 
a la premiere option la valeur nul 1 et un message du type tel que « Faites un choix », pour 
bien signaler qu'un choix volontaire est necessaire. La valeur null permet en effet une 
gestion simple de 1' absence de reponse cote serveur. Cela est particulierement utile si 
l'eventail <select> contient une liste de pays ou de departements dans un formulaire de 
saisie d'adresse. Le texte visible dans la liste de selection est le contenu de l'element 
<option>. II peut etre plus ou moins explicite, par exemple « Livre en francais » dans le 
formulaire de recherche d'une librairie en ligne. En revanche, la valeur associee a 
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1' option se doit d'etre plus courte ou meme codee, par exemple f r pour le meme type de 
site. Cette valeur contenue dans l'attribut val ue est invisible pour l'utilisateur et c'est elle 
qui sera recuperee par le serveur. En plus de 1' ensemble des attributs communs, 1' element 
<option> possede l'attribut sel ected qui prend la valeur booleenne unique selected et avec 
lequel on peut definir une valeur par defaut qui peut etre autre que celle de la premiere 
option de la liste. L'attribut disabled="disabled" permet comme pour les autres elements 
des formulaires de rendre une option inactive, et done non selectionnable. L' utilisation de 
cet attribut ne presente d'interet que pour desactiver une option en reaction a une action 
du visiteur a l'aide d'un script JavaScript. On pourrait l'utiliser par exemple dans un 
questionnaire de jeu pour lequel l'internaute n'a droit qu'a un seul essai. S'il clique sur 
une option, son choix est enterine par la definition de l'attribut disabled. Nous aurions 
dans ce cas le code suivant : 

oncl i ck="thi s .di sabl ed='disabl ed' " 

Dans l'exemple 7-8, nous creons un formulaire contenant plusieurs listes de selection 
d'options. La premiere liste (repere O) ne permet qu'un seul choix parmi quatre valeurs 
(reperes ©, Q, et ©), la premiere option n'etant creee qu'a titre informatif (repere ©). 
La liste est afhehee initialement sur une seule ligne (car l'attribut size vaut 1) (repere ©). 
La seconde liste (repere ©) permet plusieurs choix simultanes (l'attribut multiple est 
defini) parmi quatre options (reperes ©, Q. © et ©). La premiere option est choisie par 
defaut en definissant l'attribut sel ected (repere ©). Le formulaire est bien sur complete par 
un bouton d' envoi (repere ©) et un bouton de reinitialisation (repere ©). Le script PHP 
contenu dans l'exemple 7-4 permet d'afheher les choix effectues dans une nouvelle page. 

Exemple 7-8. Les listes de selection 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les listes de selection</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

</head> 

<body> 

<form action="exemple7-4.php" method="post" 

enctype="appl i cation/x-www-form-url encoded "> 
<fieldset> 

<1 egend><b>Veui 1 1 ez completer le questionnaire</b></legend> 
<label>Nom : </label><input type="text" name="nom" size="40" maxlength="256" 
^» value="votre nom" onclick="this. valuer' '" tabindex="l"/Xbr /Xbr /> 
<!-- Liste a choix unique --> 
<h3>Votre pays 

<select name="pays" size="l" tabindex="2">© 

<option value="null" disabled="disabled"> Votre pays</option>© 
<option val ue="France" > France</option>© 
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<option val ue="Bel gique" > Belgique</option>0 
<option val ue="Sui sse" > Suisse</option>© 
<option val ue="Canada" > Canada</option>© 

</select></h3> 

<!-- Liste a choix multiples --> 

<h3>Vos connaissances informatique <sraall>(Pour faire plusieurs choix maintenir 

la touche CTRL enfonceeX/smal 1 X/h3> 
<select name="savoir[]" size="4" multiple="multiple" tabindex="3">© 

<option value="C++" sel ected="sel ected"> C++</option>© 

<option val ue="Java"> Java</option>0 

<option value="PHP" onclick="this.disabled='disabled'"> PHP</option>© 

<option value="SQL"> SQL</option>© 
</select> 
<br /Xbr /> 

<input type=" submit" value="Envoi " tabindex="4"/>© 
<input type="reset" value=" Effacer tout" tabindex="5"/Xbr />© 
</fieldset> 
</form> 
</body> 
</html> 



La figure 7-7 montre le resultat obtenu. 
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Plutot que de definir les elements <option> les uns a la suite des autres, ce qui donne un 
aspect uniforme a la liste une fois deroulee, il est possible de creer des groupes d' options 
et de leur attribuer un titre qui fait ressortir les groupements effectues pour structurer la 
liste, en particulier quand elle contient un grand nombre d' elements. Pour realiser ces 
groupes, il faut faire intervenir l'element <optgroup> dans l'element <sel ect>. Les options 
de chaque groupe sont incluses entre les balises <optgroup> et </optgroup>. A l'interieur 
d'un element <sel ect>, on peut inclure autant de groupes que Ton veut. Le libelle de cha- 
que groupe est donne dans l'attribut 1 abel de l'element <optgroup> qui, outre les attributs 
communs habituels, possede egalement l'attribut di sabl ed, deja rencontre pour les autres 
composants et qui rend le groupe inactif. Le code de creation d'un groupe a done la structure 
suivante : 

1 <select name="pays" size="l" tabindex="2"> 
<optgroup label="Europe"> 

<option value="France" > France</option> 

<option val ue="Bel gique" > Belgique</option> 
</optgroup> 
</sel ect> 

L'exemple 7-9 permet d'illustrer la creation de groupes d'options. A titre de demons- 
tration, nous utiliserons ici le protocole mail to: pour l'envoi des donnees vers 
l'adresse e-mail indiquee dans l'attribut action (repere O)- Un champ de texte permet 
la saisie du nom (repere 0). L'element <select> gere l'evenement onfocus dont le 
code permet de changer la couleur du texte, ainsi que onchange qui affiche un message 
d'alerte quand un choix a ete fait (repere 0). Cet element contient d'abord un element 
<option> situe en dehors de tout groupe et dont le role est de constituer la valeur par 
defaut null qui permet de verifier si l'utilisateur a bien effectue un choix (repere ©). 
Le reste de l'element <select> est constitue de trois groupes d'options (reperes 0, © 
et ©) dont l'attribut label constitue le titre du groupe. Le premier groupe (repere 0) 
contient quatre options correspondant a des pays d'Europe (reperes 0, 0, et 0). 
Le second (repere ©) contient la liste de trois pays d'Amerique (reperes 0, © et ©). 
Le troisieme groupe (repere ©) permet aux visiteurs de choisir un continent si leur 
pays ne figure pas dans les options precedentes. II contient la liste des continents 
(reperes ©, ©, © et ©). 

Exemple 7-9. Les groupes d'options 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les groupes d'options</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
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<link rel ="shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" title=""> 
</style> 

</head> 

<body> 

<form action="mailto:xhtml@funhtml .com" method="post" >© 
<fieldset> 

<1 egend><b>Veui 1 1 ez completer le questionnaire</b></legend> 
<!-- Liste a choix unique --> 

<label>Nom : </label><input type="text" name="nom" tabindex="l" 

accesskey="A"/>© 
<h3>Indiquez quel est votre pays 

<select name="pays" size="l" tabindex="2" onfocus="this. style. color='red'" 
^» onchange="alert( 'Merci de votre choix' )"> Q 
<option value="null" > Votre pays</option>© 
<optgroup label="Europe">0 
<option value="France" > France</option>© 
<option value="Belgique" > Belgique</option>© 
<option value="Suisse" > Suisse</option>© 
<option value="Allemagne" > Allemagne</option>© 
</optgroup> 

<optgroup 1 abel ="Amerique">© 

<option value="USA" > USA </option>© 

<option val ue="Canada" > Canada</option>© 

<option val ue="Argenti ne" > Argentine</option>© 
</optgroup> 

<optgroup label="Autres">© 

<option value="Europe" > Europe </option>© 

<option value="Asie" > Asie </option>© 

<option val ue="Ameriques" > Ameriques </option>© 

<option value="Oceanie" > Oceanie</option>© 
</optgroup> 
</select></h3> 

<input type=" submit" value="Envoi " tabi ndex="3"/> 
<input type="reset" value=" Effacer tout" tabindex="4"/Xbr /> 
</fieldset> 
</form> 
</body> 
</html> 
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La figure 7-8 presente le resulfat obtenu apres avoir deroule la liste. Les differents groupes 
y sont bien visibles. 



Figure 7-8 
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Les champs caches 

Un formulaire peut aussi contenir des champs caches. Comme leur nom l'indique, ils ne 
correspondent a aucun rendu visuel et ne font done l'objet d'aucune saisie de la part du 
visiteur. Ils permettent de transmettre au serveur des informations particulieres. Ils per- 
mettent ainsi de recueillir des informations sur le poste client tel que le systeme d'exploi- 
tation, le type de navigateur qu'il utilise et son numero de version, ceci dans le but de rea- 
liser des statistiques. Ces champs permettent de transmettre tout type d' informations 
utiles au serveur, par exemple la taille maximale d'un fichier telechargeable du poste 
client vers le serveur. Cela evite les abus, ce que nous verrons a la section suivante. Pour 
creer un champ cache, nous utilisons encore l'element <input /> mais avec un attribut 
type auquel il faut attribuer la valeur hidden, et bien sur un attribut id et name pour identi- 
fier le champ et recueillir l'information dans une variable. L' attribut value contient la 
valeur qui sera transmise apres l'envoi du formulaire. Pour creer un champ cache, nous 
pouvons ecrire le code suivant : 

<input type="hidden" id="navigateur" name="navigateur" val ue="secret" /> 

Quand il s'agit de recueillir des informations sur le poste client, la valeur du champ cache 
est definie par du code JavaScript. C'est le cas dans l'exemple 7-10 qui contient, outre un 
champ de texte (repere ©) (puisqu'il y faut bien un element visible) et les habituels 
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boutons communs (reperes © et ©), deux champs caches qui vont permettre de connai- 
tre le nom du navigateur (repere ©) et le systeme d' exploitation du client (repere 0). La 
valeur de ces champs est determinee par du code JavaScript, declenche lors de l'envoi du 
formulaire par l'attribut on submit. Le premier lit le nom du navigateur (repere O) et le 
second le nom du systeme d' exploitation (repere ©). Les donnees sont ici transmises par 
le protocole mai 1 to : mais le code fonctionnerait de la meme facon avec la methode post 
et un attribut acti on different. 

Exemple 7-10. Les champs caches 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les champs caches</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 

</head> 

<body> 

<form action="mailto:xhtml@funhtml .com" id="forml" method="post" 

onsubmit="getElementById( 'forml' ) .navigateur.value=navigator.appName;© 
^» getEl ementById( 'forml ') .systeme. val ue=navigator .pi atform" ©> 
<fieldset> 

<legend><b>Veuillez completer le questionnaire</b></legend> 
<label>Nom : </label><input type="text" name="nom" tabindex="l" 

accesskey="A"/>© 
<input type="hidden" id="navigateur" name="navigateur" />© 
<input type="hidden" id="systeme" name="systeme" />© 
<input type="submit" value="Envoi " tabindex="2"/>© 
<input type="reset" valuer" Effacer tout" tabindex="3"/Xbr />© 
</fieldset> 
</form> 
</body> 
</html> 

Apres l'envoi du formulaire, le destinataire de l'e-mail indique dans l'attribut action 
recoit un e-mail dont le contenu a la forme suivante : 

nom=engel s&navigateur=Netscape&systeme=Win32 



Le transfert de fichiers 

Un site interactif peut permettre a ses visiteurs d'effectuer le transfert de divers fichiers 
du poste client vers le serveur. On trouve cette possibilite par exemple dans un site de 
petites annonces ou d'encheres en ligne. Le client peut ainsi transferer la photographie 
de l'objet qu'il met en vente. Cette fonctionnalite est incluse dans un formulaire a l'aide 
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de l'element <input /> dote d'un attribut type qui prend cette fois la valeur file. II cree 
dans le formulaire un champ compose d'une zone de texte pour taper le chemin d'acces 
au fichier et d'un bouton de selection de fichier dont l'intituie fixe est Selectionner, qui 
permet au visiteur de rechercher le fichier a transferer sur son ordinateur. L' aspect type 
du champ est presente a la figure 7-9. Quand le visiteur a choisi son fichier, le chemin 
d'acces complet a ce dernier est automatiquement affiche dans la zone de texte du com- 
posant. Pour effectuer le transfert de fichier, l'element <f orm> doit utiliser la methode post 
et avoir un attribut enctype dont la valeur est explicitement definie de la facon suivante : 

<form action="exemple7-4.php" method="post" enctype="mul ti part/form-data"> 

Ce type de composant possede l'ensemble des attributs communs. II faut y ajouter 
obligatoirement l'attribut name permettant d'identifier la variable qui contiendra le 
nom du fichier cote serveur. L'attribut size ="N" permet de limiter la taille visible de la 
zone de saisie. Pour se premunir du transfert de fichiers indesirables et assurer un cer- 
tain degre de securite sur le serveur, nous pouvons limiter le transfert a un certain 
nombre de types de fichiers en definissant l'attribut accept. II doit contenir la liste des 
types MIME des fichiers dont le transfert est permis. Pour autoriser plusieurs types, il 
faut separer chacun d'entre eux par une virgule. En attribuant a cet attribut une valeur 
de la forme suivante : 

<input type="file" name="fichier" accept="image/*" /> 

le serveur accepte le transfert de tous les types d'images. 

Pour limiter la taille des fichiers a transferer, nous pouvons saisir celle-ci dans un champ 
cache dont la valeur est egale au nombre d' octets maximal admis. Le nom de ce champ defini 
dans son attribut name doit etre MAX_FI L E_S I Z E si la reception des fichiers est geree en 
PHP sur le serveur. 



Figure 7-9 
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Lexemple 7-11 contient le code de creation d'un formulaire destine au transfert de 
fichier d'images dont le format est restreint aux types JPEG ou PNG. Dans l'element 
<form>, nous definissons les attributs method et enctype specifiques (repere O)- L'attribut 
accept de l'element O'nput /> permet de limiter les types des fichiers acceptes pour les 
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images (repere ©). Un champ cache transmet au serveur PHP la taille maximale des 
fichiers dans la variable nominee MAX_FILE_SIZE (repere ©). L' etude de la gestion du 
transfert cote serveur n'entre pas dans le cadre de cet ouvrage et je vous invite a vous 
reporter a un ouvrage specialise en fonction du langage installe sur votre serveur (PHP, 
ASPNet ou autres) pour recuperer les fichiers transmis. A titre indicatif, en PHP, les 
informations concernant le fichier transfere sont contenues dans la variable de type 
tableau nominee $_FI LES. Notons enfin que le transfert simultane de plusieurs fichiers est 
parfaitement realisable en incluant autant d'elements <input/> munis de l'attribut 
type="file" qu'il y a de fichiers. 



Exemple 7-11. Transfert de fichier 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 

<title>Transfert de fichier</title> 
</head> 
<body> 

<form action="exemple7-4.php" method="post" enctype="multipart/form-data" >© 
<fieldset> 

<1 egendXb>Envoyez-nous votre photo</b></l egend> 

<label>Choisissez le fichier JPEG ou PNG : </label><input type="file" 

name="fichier" accept="image/jpeg,image/png" />© 
<input type="hidden" name="MAX_FILE_SIZE" val ue="50000" />©<br /Xbr /> 
<input type="reset" val ue="Effacer" />    
<input type="submit" val ue="Envoyer" /> 
</fieldset> 
</form> 
</body> 
</html> 



Un formulaire complet 

A titre d' illustration, l'exemple 7-12 recapitule tout ce que nous venons d'etudier. Le 
document inclut tous les elements de formulaires possibles. La gestion des donnees 
est confiee a un script externe PHP dont le code tres simplifie figure dans l'exemple 7-13. Le 
formulaire contenant un champ de transfert de fichier, son attribut enctype prend la 
valeur multipart/form-data (repere ©)• II est divise en trois groupes delimites par des 
elements <fieldset> (reperes Q, © et ©). Le premier groupe permet d'obtenir les 
coordonnees du visiteur. II contient trois zones de texte pour la saisie du nom, du 
prenom et de 1' e-mail (reperes Q, © et ©) et une zone de mot de passe (reperes ©). 
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Ces champs sont suivis d'un groupe de boutons radio pour indiquer le sexe de la per- 
sonne (reperes Q et ©). Enfin, ce groupe se termine par une liste de selection (repere 0) 
qui contient trois groupes d' options (reperes ©, © et ©) pour le choix du pays. Le 
deuxieme groupe (repere ©) permet de saisir des informations sur les gouts du visi- 
teur. II comprend trois cases a cocher (reperes ©, © et ©) et une zone de texte multi- 
lignes (repere ©) de 50 caracteres de large et de 5 lignes de haut. Le troisieme groupe 
(repere ©) contient un composant d'envoi de fichier (repere ©) et un champ cache 
indiquant la taille maximale des fichiers fixee a 10 Ko (repere ©). Le formulaire se 
termine bien evidemment par l'insertion des boutons d'envoi et de reinitialisation 
(reperes © et ©). 

Exemple 7-12. Un formulaire complet 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<title>Formulaire traite par PHP</title> 
</head> 
<body> 

<form action="exemple7-14.php" method="post" enctype="multipart/form-data">© 
<!-- Premier groupe de composants--> 
<fieldset>@ 
<1 egend><b>Vos coordonnees</bX/l egend> 

<label>Nom : </label><input type="text" name="nom" size="40" maxlength="256" 

value="votre nom" /Xbr />© 
<1 abel >Prenom : </labelXinput type="text" name="prenom" size="40" 

maxlength="256" value="votre prenom" /Xbr />© 
<label>Mail : </label><input type="text" name="mail" size="40" maxl ength="256" 

value="votre mail" /Xbr />© 
<label>Code : </label><input type="password" name="code" size="40" maxlength="6" 

/> <br />© 

<input type="radio" name="sexe" val ue="homme" /XI abel >Homme</l abel > <br />© 
<input type="radio" name="sexe" val ue="femme" /XI abel >Femme</l abel > <br />© 
<select name="pays" size="l" tabindex="2" onfocus="thi s . style. color='red'" 

onchange="alert( 'Merci de votre choix')" onblur="this. style. color='black'">© 
<option val ue="null " > Votre pays</option> 
<optgroup 1 abel ="Europe">© 
<option val ue="France" > France</option> 
<option val ue="Bel gique" > Belgique</option> 
<option val ue="Ital ie" > Italie</option> 
<option val ue="Al 1 emagne" > Allemagne</option> 
</optgroup> 
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<optgroup label="Amerique">© 

<option value="USA" label="fr" > USA </option> 

<option val ue="Canada" > Canada</option> 

<option val ue="Argenti ne" > Argentine</option> 
</optgroup> 

<optgroup label="Autres">© 
<option value="Europe" > Europe </option> 
<option value="Asie" > Asie </option> 
<option val ue="Ameriques" > Ameriques </option> 
<option value="Oceanie" > Oceanie</option> 
</optgroup> 
</select> 
<br /> 
</fieldset> 

<!-- Deuxieme groupe de composants--> 

<fieldset>© 
<legend><b>Vos gouts</bX/l egend> 
<input type="checkbox" name="pomme" val ue="pomme" /> Pommes<br />© 
<input type="checkbox" name="poi re" val ue="poi re" /> Poires<br />© 
<input type="checkbox" name="scoubidou" value="scoubidou" /> Scoubidous<br />© 
<textarea name="gouts" cols="50" rows="5" onclick="this.value=' '">© 

Decrivez vos gouts en detail 
</textarea> 
<br /> 

</fieldset> 

<!-- Troisieme groupe de composants--> 
<fieldset>© 

<1 egend><b>Envoyez nous votre photo</b></l egend> 

<input type="file" name="fichier" accept="image/jpeg" />© 

<input type="hidden" name="MAX_FILE_SIZE" val ue="10000" />© 

<br /Xbr /> 

<input type="reset" val ue="Effacer" l>@ 
   <input type="submit" val ue="Envoyer" />© 
<br /> 
</fieldset> 
</form> 
</body> 
</html> 

La figure 7-10 montre l'aspect de ce formulaire. 

Pour permettre aux lecteurs disposant d'un serveur local ou distant muni de PHP de tester 
ce formulaire, l'exemple 7-13 designe par l'attribut action du formulaire, fournit le code 
minimal afin de verifier le bon envoi des donnees. Le serveur peut ainsi afficher dans une 
nouvelle page toutes les donnees qu'il a recues. 
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Figure 7-10 

Unformulaire 
contenant tons 
les composants 



Formulai re traite par PHP - Mozilla 



□EE 



FjriVer Edition Afffichage Altera Marque-pages Outils Feneire Aide 



1 

Precedent Suivant 



Actualiser 



| <dfc hHp:jf/www. v 1 1 ^ Rechercher 



Dnprimer 



Vos coorclouuees 
Xoin : 



3EELSEN 



Pie:;otn : JAK 



Mail : jan@funhtmt.com 
Code : 

Kntntnp 
O Femme 
| Belgique v 



Vos gouts 
E Pommes 
. . Poires 
E Scoubidoui 



_2U- ce qui peut dcr.r.er du ccit a la. vie si czuite] 



Envoyez nous votre photo 

|C:\EYRQLLES_HTML\ir|fParcourir_ 



[ Effacer ] | Envoyer 



4 



ist \£ 15) <S Charge 



I =©=■«*] d 1 



Exemple 7-13. Le code PHP de traitement des donnees 

<?php 

echo "<hl>Lecture des donnees </hl>"; 
foreach($_POST as $cl e=>$val eur) 

echo "$cle : Svaleur <br />"; 

echo "<hl>Informations sur le fichier transfere</hl>" ; 

foreach($_FILES as Stab) 

f 

foreach($tab as $cle=>$valeur) 
{ 

echo "$cle : Svaleur <br />"; 

} 

} 

?> 
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Organisation des formulaires a l aide de tableaux 

L' aspect meme d'un formulaire tel qu'il est visible a la figure 7-10 montre des similitu- 
des avec la structure d'un tableau. De plus, a moins d'avoir recours a des artifices comme 
la multiplication des caracteres d'espace en ecrivant l'entite  , il est difficile d'obte- 
nir un bon alignement des composants, tels que les libelles <1 abel > et les champs de sai- 
sie de texte par exemple. Pour cette raison, 1' utilisation d'un tableau se prete bien a la 
structuration des elements d'un formulaire. L'exemple 7-14 en donne une illustration 
classique. Les composants du formulaire etant les memes que ceux de l'exemple 7-13, 
nous ne detaillerons plus leurs roles. Notons simplement l'organisation de ces elements. 
Dans le cas present, nous avons choisi de conserver les trois groupes distincts crees avec 
l'element <fieldset>. Chacun d'entre eux (reperes O- © et ©) contient done un tableau 
specifique (reperes Q, © et ©) pour lequel nous definis sons deux groupes contenant 
chacun une colonne dont la largeur est fixee a 10 % de celle du tableau pour la colonne 
de gauche et a 70 % pour celle de droite (reperes Q et ©, Q et ©, © et ©). Chaque ligne 
est composee de deux cellules. La premiere contient le libelle cree avec <label>, inclus 
dans la premiere colonne de gauche, et le composant du formulaire dans un element 
inclus dans celle de droite. Pour les elements de la colonne de gauche contenant les libel- 
les, nous definissons l'attribut al i gn avec la valeur right (reperes ©, Q et ©). 

Exemple 7-14. Association d'un tableau et d'un formulaire 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :1 ang="fr"> 
<head> 

<meta http-equi v="Content-Type" content="text/html ; charset^i so-8859-1" /> 

<title>Formulaire traite par PHP</title> 
</head> 
<body> 

<form action="exemple7-14.php" method="post" enctype="multipart/form-data"> 
<!-- Premier groupe de composants--> 

<fieldset>0 

<1 egend><b>Vos coordonnees</b></l egend> 
<table border="0" width="100%">© 

<colgroup width="10%" align="right"X/colgroup>© 

<col group width="70VX/colgroup>© 

<tr> 

<td><label>Nom : </labelX/td> 

<td><input type="text" name="nom" size="40" maxl ength="256" 
value="votre nom" /></td> 
</tr> 
<tr> 

<td><label>Prenom : </labelX/td> 

<td><input type="text" name="prenom" size="40" maxl ength="256" 
value="votre prenom" /></td> 
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</tr> 
<tr> 

<td><label>Mail : </l abel ></td> 

<tdXinput type="text" name="mail" size="40" maxl ength="256" 

value="votre mail" /></td> 
</tr> 
<tr> 

<td><label>Code : </label></td> 

<td> <input type="password" name="code" size="40" maxl ength="6" /></td> 
</tr> 
<tr> 

<td><label>Homme : </labelX/td> 

<tdXinput type="radio" name="sexe" val ue="homme" /></td> 
</tr> 
<tr> 

<td>Femme : </td> 

<td><input type="radio" name="sexe" val ue="femme" /></td> 
</tr> 
<tr> 

<td>Votre pays : </td> 
<td> 

<select name="pays" size="l" tabindex="2" onfocus="this. style. color='red'" 
onchange="alert( 'Merci de votre choix')" 
onblur=" this. style. col or='black'"> 
<option val ue="nul 1 " > Votre pays</option> 
<optgroup 1 abel ="Europe"> 
<option value="France" > France</option> 
<option value="Belgique" > Belgique</option> 
<option value="Italie" > Ital ie</option> 
<option value="Allemagne" > Allemagne</option> 
</optgroup> 

<optgroup label="Amerique"> 

<option value="USA" 1 abel ="f r" > USA </option> 

<option val ue="Canada" > Canada</option> 

<option val ue="Argentine" > Argentine</option> 
</optgroup> 

<optgroup 1 abel ="Autres"> 
<option val ue="Europe" > Europe </option> 
<option value="Asie" > Asie </option> 
<option value="Ameriques" > Ameriques </option> 
<option value="Oceanie" > Oceanie</option> 
</optgroup> 
</select> 
</td> 
</tr> 
</table> 
</fieldset> 

<!-- Deuxieme groupe de composants--> 
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<fieldset>© 
<1 egend><b>Vos gouts </b></ 1 egend> 
<table border="0" width="100Z" >© 

<colgroup wi dth=" 10%" align="rignt"X/colgroup>0 

<col group width="70J"X/col group>© 

<tr> 

<tdXlabel>Pommes : </label> </td> 

<td><input type="checkbox" name="pomme" val ue="pomme" /> </td> 
</tr> 
<tr> 

<td><label>Poires : </label> </td> 

<td><input type="checkbox" name="poi re" val ue="poi re" /></td> 
</tr> 
<tr> 

<td><label>Scoubidous : </labelX/td> 

<td><input type="checkbox" name="scoubidou" val ue="scoubidou" /></td> 
</tr> 
<tr> 

<tdXlabel>Decrivez nous vos gouts en detail : </labelX/td> 
<td> 

<textarea name="gouts" cols="50" rows="5" onclick="this.value=' '"> 
Exprimez vous ici . . . 
</textarea> 
</td> 
</tr> 
</table> 
</fieldset> 
<!-- Troisieme groupe de composants--> 
<fieldset>© 
<1 egend><b>Envoyez-nous votre photo</bX/l egend> 
<table border="0" width="100Z" al ign="right">© 
<colgroup wi dth=" 10%" align="right"X/colgroup>© 
<col group width="70%"X/col group>© 
<tr> 

<td><label>Choisir le fichier : </labelX/td> 

<td><input type="file" name="fichier" accept="image/jpeg" /> 

<input type="hidden" name="MAX_FILE_SIZE" val ue="10000" /></td> 

</tr> 

<tr> 

<td> <input type=" submit" value=" Envoyer " /></td> 
<td><input type="reset" val ue="Effacer toutes les donnees" /></td> 
</tr> 
</table> 
</fieldset> 
</form> 
</body> 
</html> 
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L' aspect obtenu, visible a la figure 7-11, est bien plus presentable que le precedent. Nous 
reprendrons le meme formulaire au chapitre 14 en lui appliquant des styles CSS pour 
montrer les ameliorations qu'il est possible de realiser au niveau de la presentation. 
Meme si l'utilisation de tableau n'a ici pour but que d'ameliorer la presentation, elle ne 
constitue pas une entorse au principe de separation du contenu et de 1' aspect car le for- 
mulaire a toujours une structure logique. L' usage des tableaux n'est dans ce cas nul- 
lement abusif et ne nuit pas a la structuration de la page, bien au contraire. II permet de 
faire d'une pierre deux coups. Nous verrons dans la deuxieme partie de cet ouvrage qu'il 
est possible de se passer des tableaux dans ce cas, en creant des styles pour les elements 
<label> et les differents composants du formulaire O'nput /> ou <textarea>, mais cela 
necessitera un codage supplementaire. Selon certains avis, la solution la plus pragmati- 
que consiste a associer les formulaires inclus dans des tableaux avec des styles CSS pour 
en ameliorer encore 1' aspect. 



r 

*3 Formulaire traite par PHP - Microsoft Internet Explorer 
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Prenom : | votre prenom 



Mail : [votre mail 
Code : 



H online : O 
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Votre pays : | Votre pays v| 

Vos gouts 

Poimnes : □ 
Poires : □ 
Scoubidous : Q 
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Choisir le 
fichier : 
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E^ver^l 



Effacer to utes les donnees 



Figure 7-1 1 

Inclusion des composants de formulaire dans un tableau 
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Exercices 

Exercice 1 : L'attribut action de l'element <form> est-il obligatoire ? Quel est son role ? 

Exercice 2 : Quelles sont les differentes applications qui correspondent aux valeurs de 
l'attribut enctype dans l'element <form> ? 

Exercice 3 : Creez un bouton d' envoi avec une image. 

Exercice 4 : Avec quels elements peut-on creer des champs de saisie de texte ? 

Exercice 5 : Quelles sont les differences entre les methodes post et get ? 

Exercice 6 : Creez un formulaire permettant la saisie, dans un seul groupe, d'un nom 
avec un maximum de 25 caracteres, d'un mot de passe de huit caracteres et d'un e-mail 
de 40 caracteres. Ajoutez des boutons d'envoi et de reinitialisation. 

Exercice 7 : Creez un formulaire de saisie de texte de 15 lignes et une largeur de 
60 caracteres. Ajoutez des boutons d'envoi et de reinitialisation. 

Exercice 8 : Creez deux groupes de boutons radio. Le premier pour le choix de la natio- 
nalite avec les choix Francais, Communaute europeenne et Autres, et le second pour 
saisir le diplome obtenu le plus eleve avec les choix Licence, Master et Doctorat. Saisir 
egalement le nom et P e-mail. Ajoutez des boutons d'envoi et de reinitialisation. 

Exercice 9 : Creez un formulaire comprenant un seul groupe de champs ayant pour titre 
Adresse client, et qui contient cinq zones de saisie de texte dont les libelles sont nom, 
prenom, adresse, ville et code postal. Ajoutez un bouton d'envoi. 

Exercice 10 : Creez un questionnaire de qualification pour recruter un webmestre, 
comprenant les cases a cocher avec les libelles suivants : XHTML, CSS, PHP, JavaScript 
et MySQL. Saisissez le nom et le telephone. 

Exercice 11 : Dans une optique similaire a celle de l'exercice 10, proposez les memes 
choix avec une liste de selection a choix multiples. 

Exercice 12 : Creez une liste de selection a choix unique permettant de saisir le departe- 
ment du domicile. Les departements sont regroupes par regions (ne creez que trois 
regions). Les noms des regions doivent apparaitre dans la liste. 

Exercice 13 : Creez un formulaire de transfert de fichiers destines a l'envoi de document 
compresses aux formats ZIP ou TAR vers le serveur. 

Exercice 14 : Creez un formulaire complet dont le but est de permettre la saisie de tous 
les elements constitutifs d'un CV pour le recrutement d'un informaticien web (nom, 
prenom, adresse. . .) en utilisant le maximum de composants de formulaire appropries en 
fonction des besoins. Creez obligatoirement plusieurs groupes de composants. Utilisez 
l'exemple 7-4 pour verifier la bonne reception des donnees par le serveur. 
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L' utilisation des cadres pour la creation de pages web est, disons-le d'emblee, une tech- 
nique consideree comme obsolete depuis deja plusieurs annees. Le W3C a cependant 
maintenu cette possibilite dans ses recommandations jusqu'a la version XHTML 1.0 et 
l'a definitivement supprimee dans la DTD XHTML 1.1. Pour ne pas etre plus royaliste 
que le roi W3C qui admet encore cette possibilite, j'ai cependant tenu a evoquer ce sujet 
pour ceux qui seraient encore des inconditionnels de cette methode utilisee en HTML, 
meme apres avoir envisage quels sont les moyens de se passer (en grande partie) de ce 
mode d'organisation, comme nous le ferons en utilisant des styles CSS associes a un 
document XHTML 1.1 au chapitre 13. Mais qu'est-ce, au juste, qu'une page avec des 
cadres ? Les cadres constituent un type d'organisation bien particulier car, comme leur 
nom l'indique, ils ne font que definir un decoupage de la page en zones precises, alors 
que le document XHTML qui les cree ne possede aucun contenu visible dans le naviga- 
teur si ce n'est un eventuel avertissement pour les visiteurs dont le navigateur est confi- 
gure pour refuser les cadres. A chaque cadre est associe un document XHMTL habituel 
dont le contenu s'affiche dans le cadre en question et lui seul, independamment du 
contenu du cadre qui lui est adjacent. Cela peut presenter un avantage pour actualiser une 
partie donnee de la page sans avoir a reactualiser 1' ensemble. Si nous imaginons une page 
divisee et composee de trois cadres, ce n'est pas un document XHTML que nous allons 
afficher mais trois documents distincts crees separement dans trois fichiers differents. La 
caracteristique des pages avec cadres est l'independance, a priori totale, de chaque cadre 
vis-a-vis des autres. C'est un peu comme si la page etait occupee par plusieurs fenetres 
du meme navigateur. Nous avons cependant la possibilite de creer des interactions entre 
chacun d'eux a l'aide de scripts JavaScript et c'est surement cette faculte qui a seduit plus 
d'un webmestre. La figure 8-1 est une capture d'ecran du site http://www.grdfp.poly- 
mtl .ca qui utilise des cadres. II s'agit d'une application tres classique des pages avec 
cadres car le cadre de gauche contient le menu du site et permet la navigation parmi 
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toutes les pages du site. Les pages cibles des liens du menu sont affichees dans le cadre de 
droite sans jamais cacher le cadre de navigation. On peut remarquer d'emblee que chaque 
cadre possede sa propre barre de defilement vertical independante. Quoique seduisants 
pour 1' organisation d'une page, les cadres ne sont pas sans inconvenients. Le fait que le 
contenu qu'ils affichent provienne d'autres documents XHTML independants pose des 
problemes d'indexation aux moteurs de recherche qui referencent separement la page 
creant les cadres et celles qu'elle contient. Un internaute qui effectue une recherche peut 
tres bien obtenir comme resultat une des pages du site sans obtenir la page initiale qui 
contient les cadres. II ne possede plus alors le systeme de navigation inclus dans un autre 
document, ce qui peut rendre le site incomprehensible. Le referencement d'un site etant 
essentiel pour la notoriete d'un site, il s'agit la d'un inconvenient majeur. 

Nous allons voir successivement quelle doit etre la structure des pages divisees en cadres, 
puis la maniere de creer ces divisions, qu'elles soient horizontales, verticales ou encore 
plus complexes en mariant ces deux possibilites. Enfin, nous envisagerons la maniere de 
faire communiquer les cadres entre eux. 
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Figure 8-1 

l/w exemple de site avec cadres 



Structure des pages avec cadres 

L' utilisation des cadres n' etant pas permise en XHTML 1.1, il faut recourir a XHTML 1.0 
qui admet cette creation dans une DTD speciale nommee « Frameset » (voir le site du 
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W3C : http://www.w3.Org/TR/xhtmll/#a_dtd_XHTML-l.0-Franieset). La declaration DOC- 
TYPE doit done etre modifiee par rapport a celle des documents crees jusqu' a present et 
nous ecrirons dans tout ce chapitre la declaration suivante : 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml 1/DTD/xhtml 1-f rameset.dtd"> 

N' ay ant pas de contenu propre, une page avec cadre presente une difference fondamen- 
tale avec un document XHTML 1.1, a savoir que l'element <body> n'apparait pas dans 
l'element <html>. De plus, son code est generalement tres court car il ne contient que la 
definition des cadres et aucun contenu visible dans la page. Pour creer les cadres de la 
page, l'element <body> est remplace par les elements <f rameset> et <f rame /> qui permettent 
la definition des cadres. 



Les elements <frameset> et <frame> 

L'element <f rameset> permet la definition des divisions de la page en differents cadres, 
dont les dimensions ou les proportions sont definies par ses attributs rows et col s sur lesquels 
nous allons revenir. 

Cet element inclut ensuite autant d'elements <frame /> que le concepteur a defini de 
cadres differents. Comme pour les tableaux, l'element <f rameset> peut egalement conte- 
nir d'autres <f rameset>, ce qui permet la creation de cadres imbriques dont l'utilisation 
risque de rendre la structuration de la page difficile a comprendre. En prevision d'even- 
tuels navigateurs qui ne gereraient pas les cadres, ou d'une deactivation par l'utilisateur 
de cette gestion, il faut proposer un contenu de remplacement pour ne pas desappointer 
les visiteurs. Ce contenu est inclus dans un element <nof rames> qui contient a son tour un 
element <body> et ses elements enfants habituels. 

L'element <frameset> possede, comme la plupart des autres, les attributs id, class et 
title dont l'usage nous est desormais connu. II possede en plus les attributs suivants qui 
permettent la division de la page en plusieurs cadres : 

• rows : il permet de diviser la page en cadres horizontaux et contient une suite de 
dimensions separees par des virgules. Ces dimensions peuvent etre donnees en pixel, 
en pourcentage ou a l'aide de coefficients indiquant des proportions. 

• col s : il permet la division de la page en cadres verticaux et admet les memes types de 
valeurs que le precedent. 

Nous mettrons en oeuvre ces attributs dans les sections suivantes. 

L'element <frameset> possede egalement, comme l'element <body> qu'il remplace, les 
attributs de gestion d'evenement onload et onunload qui correspondent respectivement 
aux evenements survenant quand la page se trouve chargee ou fermee. lis permettent de 
declencher des scripts JavaScript a l'arrivee et au depart d'un visiteur. II peut s'agir par 
exemple de verifier 1' existence d'un cookie sur le poste client lors du demarrage ou 
d'afficher un message en fin de connexion. 
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L' element <f rame /> est un element vide et, comme l'element <img />, il definit principa- 
lement un document cible a afficher dans le cadre qu'il cree. Ce sont done ces attributs 
qui jouent un role preponderant. En plus des attributs class, id et tit! e habituels, il possede 
les attributs suivants : 

• name : il permet, comme id, d'attribuer un nom au cadre, ce qui est indispensable pour 
gerer les pages et choisir dans quel cadre va s' afficher la cible d'un lien par exemple. 
Le nom ne doit pas commencer par le caractere de soulignement mais par une lettre. 

• 1 ongdesc : cet attribut facilite 1' accessibility des sites en donnant l'URL de la description 
detaillee du contenu d'un cadre. 

• sre : il est essentiel car il definit l'URL du document XHTML qui va s'afheher dans le 
cadre. 

• f rameborder : il definit si le cadre a une bordure (valeur 1) ou s'il n'en a pas (valeur 0). 
Quand elle est bien geree par les navigateurs, 1' utilisation de la valeur permet de 
supprimer le desagreable effet visuel de delimitation des cadres. 

• marginwidth : il definit la largeur de la marge entre le bord gauche du cadre et son contenu. 
Sa valeur est donnee en pixel ou en pourcentage de la largeur totale du cadre. 

• marginheight : il definit la hauteur de la marge entre le bord superieur du cadre et son 
contenu. Comme le precedent, il est defini en pixel ou en pourcentage de la hauteur 
totale du cadre. La hauteur du cadre dependant de son contenu, il peut etre hasardeux 
de definir une hauteur de marge en pourcentage. 

• noresize:il prend la valeur booleenne unique no re size pour interdire au visiteur de 
redimensionner le cadre. Cela permet de preserver les proportions choisies par le createur 
du site. Pour autoriser le redimensionnement, il suffit d'omettre cet attribut. 

• scrolling : les cadres etant plus petits que la fenetre du navigateur, les documents 
qu'ils afhehent sont generalement plus grands. Dans ce cas, des barres de defilements 
horizontal et vertical peuvent apparaitre sur les bords droit et bas du cadre. Pour gerer 
explicitement l'apparition de ces barres de defilement, l'attribut scrolling peut pren- 
dre les valeurs yes (barres toujours presentes), no (jamais de barres quel que soit le 
contenu du cadre) ou auto (apparition des barres si necessaire, la gestion etant effec- 
tuee par le navigateur en fonction du contenu). Pour utiliser la valeur no, il faut etre sur 
que le contenu soit entierement integrable dans le cadre, sinon une partie seulement 
est visible. 

Pour les navigateurs qui ne supporteraient pas les cadres, il est possible d' afficher un contenu 
de remplacement en l'incluant dans l'element <nof rames>. II doit etre inclus dans l'ele- 
ment <frameset> et doit contenir a son tour un element <body> qui inclut les elements 
XHTML creant la page de remplacement. Ce contenu peut etre du meme type que celui 
d'une page normale mais il ne s'affichera qu'en cas d'impossibilite de gestion des cadres. 

Nous allons maintenant envisager la realisation de differents types de pages avec cadres. 
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Les cadres horizontaux 

Le premier cas de creation de cadres consiste a partager la page en plusieurs cadres hori- 
zontaux. Pour cela, il suffit de definir l'attribut rows de l'element <f rameset> de la maniere 
suivante : 

<frameset rows="100,400,200"> 
<frame src="http://www.funhtml .com/pagehaut.html " /> 
<frame src=" http://www.funhtrnl.com/pagecentre.html" /> 
<frame src=" http://www.funhtml.com/pagebas.html" /> 
<nof rames> 
<body> 

<p>Votre navigateur ne supporte pas les cadres !<br /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 

Dans ce cas, le cadre superieur a une hauteur de 100 pixels, le suivant de 400 pixels et 
celui du has de 200 pixels. Si l'utilisateur a un ecran de 800 x 600 pixels, il ne verra le 
cadre du has que partiellement ou pas du tout selon la configuration du navigateur. II est 
egalement possible de definir les dimensions d'une partie seulement des cadres et de lais- 
ser le navigateur attribuer le reste de la hauteur en fonction des dimensions de l'ecran du 
visiteur. 

En ecrivant par exemple le code suivant : 

<frameset rows = "100,*,200"> 
<frame src="http://www.funhtml .com/pagehaut.html " /> 
<frame src=" http://www.funhtml.com/pagecentre.html" /> 
<frame src=" http://www.funhtml.com/pagebas.html" /> 
<nof rames> 
<body> 

<p>Votre navigateur ne supporte pas les cadresKbr /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 

nous creons egalement trois cadres horizontaux, le premier de 100 pixels de haut, le 
dernier de 200 pixels de haut, et le cadre central a une hauteur variable, selon la defini- 
tion de l'ecran du poste client, laquelle se definit a l'aide du caractere * (ce cadre a ici 
300 pixels de haut dans un ecran de 800 x 600, et 468 pixels sur un ecran de 1024 x 768). 
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A cette hauteur du cadre central, il faut enlever l'espace variable occupe eventuellement 
par les barres de menus et d'icones des navigateurs. Comme c'est souvent le cas, la defi- 
nition des hauteurs en pourcentage preserve les proportions dessinees par le createur de 
la page. Nous pouvons par exemple definir des dimensions relatives suivantes : 

<frameset rows="15£,75%,10%"> 
<frame src="http://www.funhtml .com/pagehaut.html " /> 
<frame src=" http://www.funhtml.com/pagecentre.html" /> 
<frame src=" http://www.funhtml.com/pagebas.html" /> 
<nof rames> 

<body> <a id="lien" href="http://www.funhtml .com/index. html " tabindex="l" 
accesskey="A" title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 

Dans ce cas, le partage de la hauteur disponible de l'ecran se fait toujours selon la propor- 
tion 15 % en haut, 75 % au centre et 10 % en bas, quel que soit l'ecran de visualisation de 
la page. 

II est aussi possible de melanger ces deux dernieres definitions en utilisant une taille 
absolue en pixel pour le cadre superieur qui affiche par exemple un bandeau publicitaire 
de hauteur fixe, et une ou plusieurs tailles relatives en pourcentage pour les autres cadres. 
Si nous definissons par exemple le code suivant : 

<frameset rows = "120, 75%, *"> 
<frame src="http://www.funhtml .com/pagehaut.html " /> 
<frame src=" http://www.funhtml.com/pagecentre.html" /> 
<frame src=" http://www.funhtml.com/pagebas.html" /> 
<nof rames> 
<body> 

<p>Votre navigateur ne supporte pas les cadresKbr /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 

Le cadre du haut a toujours 100 pixels de haut, le second 75 % de la hauteur totale de 
la fenetre disponible, et le cadre du bas dispose du reste. Une derniere possibilite 
consiste a definir des dimensions relatives a l'aide de coefficients numeriques entiers 
qui creent un partage proportionnel de la hauteur disponible. En ecrivant les definitions 
suivantes : 

I <frameset rows = "2,5,1"> 

<frame src="http://www.funhtml .com/pagehaut.html " /> 
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<frame src=" http://www.funhtml.com/pagecentre.htrnl" /> 
<frame src=" http://www.funhtml.com/pagebas.html" /> 
<nof rames> 
<body> 

<p>Votre navigateur ne supporte pas les cadres !<br /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 

le cadre superieur occupera 2/(2 + 5+1) soit 2/8 de la hauteur disponible, le suivant 5/8 
et le dernier 1/8. II suffit de changer un seul des coefficients pour que le partage soit 
different. 

L'exemple 8-1 cree une page divisee en deux cadres horizontaux dont les hauteurs res- 
pectives sont definies a 200 et 600 pixels (repere ©)• Le contenu du premier cadre est 
ensuite determine grace a 1'attribut src du premier element <f rame /> (repere ©), et nous 
definissons de la meme facon le contenu du second cadre (repere ©). L' element <nof ra- 
mes> fournit un contenu alternatif en proposant une version sans cadres (repere ©)• La 
figure 8-2 montre le resultat obtenu, le premier cadre contenant la page d'accueil du site 
www.w3c.org et le second celle du site www.eyrolles.com. Les valeurs utilisees pour les 
attributs src sont ici celles de sites existants pour simplifier la demonstration, mais dans 
la pratique des pages avec cadres, il s'agit des URL de pages XHTML standards qui 
exposent le contenu du site. Ces pages peuvent done etre ecrites a l'aide de la DTD 
XHTML 1.1. 

Exemple 8-1. Creation de cadres horizontaux 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml 1/DTD/xhtml 1-f rameset.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Page avec cadres horizontaux</title> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
</head> 

<frameset rows="200 ,600">O 

<frame src="http: //www. w3.org" name="haut" f rameborder="0" />© 
<frame src="http://www. eyrolles.com" name="bas" f rameborder="0" />© 
<nof rames>© 
<body> 
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<p>Votre navigateur ne supporte pas les cadres !<br /> Voir la <a id="1ien" 

href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
•» title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 
</html> 
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Figure 8-2 

Lfae ptfge <avec dewx cadres horizontaux 



Les cadres verticaux 

Notre second exemple nous permet de partager une page en cadres verticaux. Pour y par- 
venir, il suffit de definir l'attribut col s de l'element <f rameset> a la place de l'attribut rows, 
les valeurs indiquees s'appliquant de gauche a droite. La dimension de chaque cadre peut 
etre definie en pixel selon le modele suivant : 

<frameset cols = "250, 600, 100"> 
<frame src="http://www.funhtml .com/pagegauche.html " /> 
<frame src=" http://www.funhtml.com/pagecentre.html" /> 
<frame src=" http://www.funhtml.com/pagedroite.html" /> 
<nof rames> 
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<body> 

<p>Votre navigateur ne supporte pas les cadres !<br /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 

Dans ce cas, nous divisons la page en trois cadres verticaux, le plus a gauche ayant 
250 pixels de large, le deuxieme 600 pixels et le troisieme 100 pixels. Les elements 
<f rame /> definissent comme dans la section precedente le contenu du cadre au moyen de 
leur attribut src. 

L' usage des pourcentages pour definir la part de chaque cadre donnerait le code suivant : 

<frameset cols = "253;, 60%, 15%"> 
<frame src="http://www.funhtml .com/pagegauche.html " /> 
<frame src=" http://www.funhtrnl.com/pagecentre.html" /> 
<frame src=" http://www.funhtml.com/pagedroite.html" /> 
<nof rames> 
<body> 

<p>Votre navigateur ne supporte pas les cadresKbr /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 

Ce code permet d'obtenir des cadres qui gardent les memes proportions dans le naviga- 
teur quelle que soit la definition de l'ecran du visiteur. Comme pour les cadres horizontaux, 
il est possible de melanger les dimensions en pixel et en pourcentage dans le meme 
element <frameset>, par exemple : 

<frameset cols = "200,*, 10%"> 

Dans ce cas, le cadre de gauche mesure 200 pixels de large, celui de droite 10 % de la 
largeur de la fenetre et le cadre central occupe la largeur restante. 

La derniere possibilite de definition des dimensions des cadres avec des proportions per- 
met d'atteindre le meme but. La definition suivante cree un partage proportionnel selon 
les coefficients 2, 5 et 1 , soit 2/8 pour le premier cadre vertical, 5/8 pour le deuxieme et 
1/8 pour le dernier. 

<frameset cols = "2,5,8"> 
<frame src="http://www.funhtml .com/pagegauche.html " /> 
<frame src=" http://www.funhtml.com/pagecentre.html" /> 



Le langage XHTML 

Partie I 



<frame src=" http://www.funhtml.com/pagedroite.htrnl" /> 
<nof rames> 
<body> 

<p>Votre navigateur ne supporte pas les cadresKbr /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 

L'exemple 8-2 cree une page divisee en trois cadres verticaux, le cadre de gauche ayant 
une largeur fixee a 30 % de la fenetre du navigateur, celui de droite une largeur fixe de 
250 pixels et le cadre central occupe la largeur restante definie a l'aide du caractere * 
(repere O)- L'adresse de chacun des documents a afficher dans ces cadres est comme pre- 
cedemment definie par les attributs src des elements <f rame /> (reperes ©, © et Q). Pour 
chacun d'eux, l'attribut f rameborder permet de cacher la bordure de separation entre les 
cadres. De plus, le cadre de gauche est defini comme non redimensionnable a l'aide de 
l'attribut no resize (repere ©). 

Exemple 8-2. Creation de cadres verticaux 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html 

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 

"http://www.w3.org/TR/xhtml l/DTD/xhtmll-frameset.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Cadres trois colonnes</title> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
</head> 

<frameset cols="30%,*,250" >© 
<frame src="http://www. arte-tv.com" name="gauche" noresize="noresize" 

frameborder="0" />© 
<frame src="http://www. france2.fr" name="milieu" f rameborder="0" />© 
<frame src="http://www. lemonde.fr" name="droit" f rameborder="0" />© 
<noframes>© 
<body> 

<p>Votre navigateur ne supporte pas les cadresKbr /> 

Voir la <a id="lien" href="http://www.funhtml .com/index. html " tabindex="l" 
^» accesskey="A" title="Version sans cadres">version sans cadres</a>© 
</p> 
</body> 
</nof rames> 
</f rameset> 
</html> 
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La figure 8-3 montre le resultat obtenu. Comme dans l'exemple precedent, notons que 
dans un site reel le contenu de chacun des cadres est constitue du contenu du site et non 
de sites externes. 
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Figure 8-3 

Partage de la page en cadres verticaux 

Les cadres imbriques 

La creation d'une page dont les cadres sont tous orientes dans le meme sens se revele 
done tres simple comme nous venons de le voir. Au niveau de la presentation, elle pre- 
sente 1' inconvenient de creer des divisions qui sont toutes soit dans le sens horizontal, 
soit dans le sens vertical, comme nous venons de le realiser. De la meme maniere que 
pour les tableaux, il est possible d'ameliorer ces divisions en creant des cadres plus com- 
plexes combinant ces deux types de divisions pour obtenir par exemple un resultat simi- 
laire a celui presente a la figure 8-4. 

Pour obtenir ce type de resultat, il nous faut emboiter des elements <f rameset> les uns 
dans les autres. Ces inclusions demandent une attention particuliere car l'ordre d' appa- 
rition des differents elements <frameset> et <frame /> dans le code XHTML a une 
importance sur le resultat final. L'ecriture du code necessite au prealable un minimum 
d' analyse. Pour concevoir la division presentee a la figure 8-4, il faut imaginer la maniere 
dont nous decouperions des limites entre les cadres dans une feuille avec une regie et 
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Figure 8-4 

Une page avec des 
cadres imbriques 
horizontaux puis 
verticaux 
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un cutter, en tenant compte du minimum de coupes, ce qui implique un ordre precis. 
Le processus est done le suivant : 

• Partager la page en trois cadres horizontaux avec le code suivant (exemple 8-3, 
repere Q) : 

<frameset rows="80,*,50"> 

• Definir le contenu du cadre superieur avec un premier element <f rame> et son attribut 
sre (exemple 8-3, repere 0). 

• Partager le cadre du milieu en trois cadres verticaux a l'aide d'un nouvel element 
<f rameset> selon le code suivant (exemple 8-3, repere @) : 

<frameset cols="16%,*,18r> 

• Donner un contenu a ces trois cadres en creant trois elements <f rame /> et en definissant 
leur attribut sre (exemple 8-3, reperes ©, et ©). 

• Refermer le second element <frameset> avec la balise </frameset> (exemple 8-3, 
repere ©). 

• Definir le contenu du cadre du bas avec un dernier element <f rame> et son attribut sre 
(exemple 8-3, repere 0). 

• Definir eventuellement un element <nof rames> pour creer un contenu de remplacement 
aux cadres (exemple 8-3, repere 0). 
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• Refermer le premier element <frameset> avec la balise </frameset> (exemple 8-3, 
repere ©). 

• Cette procedure est appliquee dans l'exemple 8-3. Elle permet d'obtenir le resultat 
presente a la figure 8-4. 

Exemple 8-3. Creation de cadres imbriques 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml 1/DTD/xhtml 1-f rameset.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>XHTML 1.1 et CSS 2.1 : les standards</title> 

<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
</head> 

<frameset rows="80,*,50">0 
<frame src="entete. html " name="haut" />© 
<frameset cols="16%.*,18r>© 

<frame src="menu. html " name="gauche" />© 

<frame src="contenu.html " name="centre" />© 

<frame src="lien.html " name="droit" />© 
</frameset>0 

<frame src="adresse.html " name="bas" />© 
<nof rames>© 
<body> 

<p>Votre navigateur ne supporte pas les cadres !<br /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset>© 
</html> 

Comme l'indiquent les images de validation du W3C presentes dans les documents 
menu. html, contenu.html et lien.html, visibles a la figure 8-4, ceux-ci sont tous valides 
avec la DTD XHTML 1.1, ce qui confirme l'independance entre la page qui cree les 
cadres en utilisant la DTD XHTML 1.0 Frameset et les documents qui s'affichent dans 
ces derniers. 

Nous pouvons egalement creer une page avec des cadres imbriques d'un type different 
tels que ceux qui sont representes a la figure 8-5. En apparence, cette division ressemble 
beaucoup a celle de la figure 8-4, mais nous allons voir que sa realisation est beaucoup 
plus complexe. 

La phase preparatoire fait tout d'abord apparaitre une division en deux cadres verticaux 
de 16 % et 84 % de largeur, puis la division du second cadre vertical en deux cadres 
horizontaux, le premier de 80 pixels de haut et le second occupant la hauteur restante. 
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Figure 8-5 

Cadres imbriques verticaux puis horizontaux 



Ce dernier cadre est ensuite lui-meme partage en deux cadres de 150 pixels de largeur a 
droite et le reste au centre. Pour obtenir ce resultat, l'ordre d'apparition du code XHTML 
doit done etre le suivant : 

• Partager la page en deux cadres verticaux en utilisant un premier element <f rameset> et 
son attribut col s (voir l'exemple 8-4, repere ©). 

<frameset col s="16%,*"> 

• Utiliser un element <f rame> et son attribut sre pour definir le contenu du cadre de gauche, 
en l'occurrence le document menu.html (voir l'exemple 8-4, repere ©). 

<frame src="menu. html " name="gauche" /> 

• Partager le cadre vertical droit en deux cadres horizontaux, le plus haut de 80 pixels et 
le plus bas occupant la hauteur disponible, en ecrivant un nouvel element <f rameset> 
et en definissant son attribut rows (voir l'exemple 8-4, repere ©). 

<frameset rows="80,*"> 

• Utiliser un element <frame> et son attribut sre pour definir le contenu du cadre superieur 
haut nomme haut (voir l'exemple 8-4, repere ©). 

<frame src="entete.html " name="haut" /> 
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• Partager le second cadre horizontal en deux cadres verticaux a l'aide d'un troisieme 
element <f rameset> (voir l'exemple 8-4, repere 0). 

<frameset col s="*,150px"> 

• Ecrire les deux elements <f rame /> et definir leur contenu respectif (voir l'exemple 8-4, 
reperes © et ©). Le cadre nomme centre contient le document contenu.html, et celui 
qui est nomme droit le document 1 ien.html. 

<frame src="contenu.html " name="centre" /> 
<frame src="l ien.html " name="droit" /> 

• Refermer le troisieme puis le deuxieme element <frameset> (voir l'exemple 8-4, 
reperes © et ©). 

• Ecrire un element <nof rames> pour creer un contenu de substitution (voir l'exemple 8-4, 
repere ©). 

• Refermer le premier element <f rameset> (voir l'exemple 8-4, repere ©). 

Exemple 8-4. Cadres imbriques complexes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtml 1-f rameset.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>XHTML 1.1 et CSS 2.1 : les standards</title> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
</head> 

<frameset col s="163;,84r>© 
<frame src="menu.html " name="gauche" />© 
<frameset rows="80,*">© 

<frame src="entete.html " name="haut" />© 
<frameset cols="*,150px">© 

<frame src="contenu.html " name="centre" />© 

<frame src="l ien. html " name="droit" />© 
</f rameset>© 
</f rameset>© 
<nof rames>© 
<body> 

<p>Votre navigateur ne supporte pas les cadres !<br /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</frameset>© 
</html> 
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La communication entre les cadres 

L' utilisation classique de pages avec cadres est une division en trois cadres comme celle 
du site presente a la figure 8-6. 



Figure 8-6 

Un site compose 
de trois cadres 
dont un menu 
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Le cadre superieur est habituellement un bandeau publicitaire ou le logo et un texte pre- 
sentant l'entreprise. Le cadre situe en bas a gauche contient generalement un menu, com- 
pose de liens, qui sera toujours visible (rappelons que e'est le principal argument des 
createurs de ce type de site). Enfin, le cadre situe en bas a droite est le cadre principal 
dans lequel s'afhehent les pages cibles des liens du menu. Un probleme se pose alors 
pour realiser cette operation puisque, par definition, chaque cadre a un contenu indepen- 
dant des autres et que, par defaut toujours, chaque document cible d'un lien s'affiche 
dans le meme cadre que celui qui contient ce lien. Pour arriver au resultat voulu, nous 
avons le choix entre deux possibilites : la premiere oblige a creer tous les documents affi- 
ches dans les cadres avec la DTD XHTML 1 .0 Transitional, ce qui, il faut le reconnaitre, 
est en parfaite contradiction avec toute la philosophie de cet ouvrage ; la seconde, utili- 
sant JavaScript, permet de creer ces memes documents en respectant la DTD XHTML 1.1. 
C'est pourquoi la seconde methode a de loin ma preference, mais nous exposerons 
cependant ces deux options pour que chacun fasse son choix. La premiere phase consiste 
bien sur a creer la page generant les cadres. Elle est commune aux deux solutions et est 
realisee dans l'exemple 8-5 dans lequel nous comme neons par partager la fenetre en deux 
cadres horizontaux selon la methode envisagee dans les exemples precedents (repere 
Nous definissons ensuite le contenu du premier cadre nomme haut (repere ©) puis 
nous partageons le cadre inferieur en deux cadres verticaux a l'aide d'un nouvel ele- 
ment <f rameset> (repere ©). Le contenu de ses nouveaux cadres est defini dans deux 
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elements <f rame /> (reperes © et 0). L' element <nof rames> permet de creer un contenu 
de substitution (repere ©). 

Exemple 8-5. La page de creation des cadres 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml 1/DTD/xhtml 1-f rameset.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>XHTML 1.1 et CSS 2.1 : les standards</title> 

<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
</head> 

<frameset rows="80,*">0 
<frame src="entete. html " name="haut" />© 
<frameset cols="165£,*">© 
<frame src="exemple8-6.html " name="gauche" id="gauche" f rameborder="0" />© 
<frame src="accueil .html " name="centre" id="centre" f rameborder="0" />© 
</f rameset> 
<nof rames>© 
<body> 

<p>Votre navigateur ne supporte pas les cadres !<br /> Voir la <a id="lien" 
href="http://www.funhtml .com/index. html " tabindex="l" accesskey="A" 
title="Version sans cadres">version sans cadres</a> 
</p> 
</body> 
</nof rames> 
</f rameset> 
</html> 

Nous allons maintenant envisager les methodes qui permettent de fixer l'affichage des 
documents cibles des liens dans le cadre desire. La premiere methode fait l'objet de 
l'exemple 8-6, et la seconde de l'exemple 8-7 ; on doit done pour utiliser cette derniere 
modifier le code de l'exemple 8-5 en remplacant tout simplement le code de la ligne 
suivante : 

<frame src="exemple8-6.html " name="gauche" id="gauche" f rameborder="0" /> 
par celui-ci : 

<frame src="exemple8-7.html " name="gauche" id="gauche" f rameborder="0" /> 



La methode utilisant la DTD Transitional 

Dans la DTD XHTML 1 .0 Transitional comme dans les anciennes versions de HTML, 
l'element <a> possede un attribut supplemental par rapport a celle de XHTML 1.1. 
II s'agit de l'attribut target que nous avons deja evoque au chapitre 5, Creer des liens. La 
valeur de cet attribut est le nom du cadre dans lequel doit s'afheher le document cible du 
lien. Cette valeur doit correspondre a celle des attributs name et id du cadre concerne, ce 
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qui confirme la necessite de les definir systematiquement avec la meme valeur dans les 
elements <f rame />. Dans ce cas, correspondant au site de la figure 8-6, le cadre de gau- 
che contient le menu vertical cree sous la forme d'une liste de liens qui permet de 
naviguer dans le site. Ce menu est contenu dans le document de l'exemple 8-6. Chaque 
clic sur un lien doit afficher un document different dans le cadre nomme centre (voir 
l'exemple 8-5, repere 0). 

Pour cela, il faut d'abord declarer l'utilisation de la DTD Transitional dans la declaration 
DOCTYPE selon le modele suivant : 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
| Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

Chaque lien cree avec l'element <a>, et inclus dans la liste a puces introduite par l'ele- 
ment <ul> (repere ©), peut alors contenir, outre les attributs habituels, 1'attribut target 
dont la valeur est ici fixee a centre puisque tel est le nom du cadre cible (reperes Q a 0). 
Du point de vue de la conformite par rapport aux specifications du W3C, le document de 
l'exemple 8-5 est conforme a XHTML 1.0 Frameset, et le document de l'exemple 8-6 a 
XHTML 1.0 Transitional. 

Nous obtenons done un site fonctionnel, meme s'il est realise au prix d'une entorse a nos 
principes de base. Lentorse est minime dans la mesure ou la DTD Transitional n'est 
appliquee que pour l'utilisation du seul attribut target, et que nous n'en profitons pas 
pour ressortir des catacombes des elements comme <center> ou <font> que nous serions 
en droit d'utiliser dans ce document. De plus, contrairement a la seconde solution, le site 
reste fonctionnel meme si l'internaute desactive JavaScript. 

Exemple 8-6. Methode utilisant I'attribut target 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http://www.w3.org/TR/xhtml 1/ DTD/xhtml 1-transitional .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 
<title>Menu</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 

< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 

<style type="text/css" > 
body { background-col or :#CCC; col or: 000; } 

</style> 
</head> 
<body> 

<ul>0 

<li><a id="structure" href="structure.html " tabindex="l" accesskey="A" 

title="Structure" target="centre" >Structure</aX/l i>0 
<li><a id="texte" href="texte.html " tabindex="l" accesskey="B" titl e="Texte" 

target="centre" >Le texte</a></l i>0 
<li><a id="image" href="images.html " tabindex="l" accesskey="C" title="Images" 
^» target="centre" >Les images</aX/l i >0 
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<li><a id="tableau" href="tableau.html " tabindex="l" accesskey="D" 
title="Tableaux" target="centre">Les tableaux</aX/li>© 
<li><a id="form" href="form.html " tabindex="l" accesskey="D" title="Formulaires" 
target="centre">Les formul ai res</aX/l i >© 

</ul> 
</body> 
</html> 



La methode JavaScript 

Comme il a deja ete signale plusieurs fois, l'utilisation de JavaScript suppose que le visi- 
teur n'a pas eu la mauvaise idee de desactiver les scripts dans son navigateur. Cette 
deactivation est plutot rare, ne serait-ce que parce qu'elle demande un effort de configu- 
ration manuelle a laquelle peu d'internautes se livrent. Notre seconde methode peut done 
etre aussi fonctionnelle dans l'immense majorite des cas. Dans le cas contraire, l'utilisa- 
tion de l'element <noscript> peut permettre d'afficher un message du type : « Ce site 
necessite l'activation de JavaScript », afin de prevenir le visiteur. 

La methode JavaScript permet de detourner subtilement l'interdiction d'employer l'attri- 
but target faite par XHTML 1.1 en y faisant pourtant reference, mais sans qu'il soit pre- 
sent dans le code du document affiche dans le cadre nomme gauche. Le menu cree dans 
l'exemple 8-7 est en effet parfaitement conforme et valide par le W3C selon la DTD 
XHTML 1.1. 

Pour afficher la cible de chaque lien dans le cadre nomme centre, il faut gerer l'attribut 
oncl ick de l'element <a> et ecrire un code JavaScript de la forme suivante : 

<a id="structure" href="striicture.html " tabindex="l" accesskey="A" 
itle=" Structure" oncl ick= "document. get El ementByldt 'structure' ) . target=' centre' " 
Structure</a> 

ou encore plus simplement, car ce code est contenu dans l'element lui-meme : 

oncl ick=" this . target=' centre'" 

le mot-cle this permettant de faire reference a l'element lui-meme alors que la methode 
getEl ementByldt ) est plus generale et « elegante » car elle permet d'acceder a un element 
quelconque du document. L'exemple 8-7 melange volontairement ces deux codes (reperes O 
a 0) pour monter leur equivalence dans le cas present. 

Exemple 8-7. Methode JavaScript 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Menu</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=" . ./images/favicon.ico" /> 
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<style type="text/css" > 
body { background-col or :#CCC; col or: 000; } 

</style> 
</head> 
<body> 

<ul> 

<li><a id="structure" href="structure.html " tabindex="l" accesskey="A" 

ti tl e=" Structure" oncl i ck= "document .get El ementById( 'structure' ) . 

target='centre' " >Structure</aX/l i >© 
<li><a id="texte" href ="texte. html " tabindex="l" accesskey="B" title="Texte" 

oncl ick="document .getEl ementById( 'texte' ) .target='centre' " >Le texte</a> 

</li>© 

<li><a id="image" href="images.html " tabindex="l" accesskey="C" title="Images" 
oncl ick="document. getEl ementById( 'image' ) .target='centre' " >Les images</a> 
</li>© 

<li><a id="tableau" href="tableau.html " tabindex="l" accesskey="D" 

title="Tableaux" onclick="this.target='centre'">Les tabl eaux</aX/l i >Q 

<li><a id="form" href="form. html " tabindex="l" accesskey="D" title="Formulaires" 
onclick="this.target='centre'">Les formul ai res</aX/l i>© 

</ul> 
</body> 
</html> 

Comme je l'ai deja indique au debut de ce chapitre, cette technique des cadres est consi- 
deree comme obsolete, et c'est done dans le but d'etre objectif et avec des reserves que je 
l'ai presentee dans ce chapitre. En conclusion, je ne peux que recommander a tous ceux 
qui seraient tentes d'utiliser les cadres dans leurs sites, d'examiner auparavant les solu- 
tions qui se presentent a eux. Les chapitres de la deuxieme partie de cet ouvrage, et en 
particulier le chapitre 13 sur la mise en page, le dimensionnement et le positionnement, 
peuvent les eclairer en la matiere. Leur choix final n'en sera que plus motive. 



Exercices 

Exercice 1 : La DTD XHTML 1 . 1 est-elle utilisable pour creer des cadres ? 

Les documents afhehes dans les cadres peuvent-ils etre conformes a XHTML 1.1 ? 

Pourquoi ? 

Exercice 2 : Dans quel cas, sommes-nous obliges d'utiliser la DTD XHTML 1.0 Transi- 
tional ? 

Exercice 3 : Quels sont les inconvenients des cadres ? 

Exercice 4 : Comment empecher que les cadres soient redimensionnables par le visiteur ? 

Exercice 5 : Comment faire pour supprimer les bordures qui delimitent les cadres par 
defaut ? 
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Exercice 6 : Creez une page divisee en trois cadres horizontaux de dimensions respecti- 
ves 100 pixels, 450 pixels et le reste de la hauteur totale pour le cadre inferieur. Affichez 
un titre dans le cadre superieur, une page de votre site prefere dans le cadre central et une 
page contenant une suite de liens dans le cadre inferieur. 

Exercice 7 : Creez une page contenant quatre cadres en operant une division horizontale 
et une division verticale sur toute la largeur et la hauteur de la page. Le cadre superieur 
gauche contient une image, le cadre inferieur gauche un menu ; le cadre superieur droit 
renferme un gros titre, et le cadre inferieur droit le contenu redactionnel du site. 

Exercice 8 : Reutilisez la structure de l'exemple 8-4 (visible a la figure 8-5) pour afficher 
la cible des liens du cadre de gauche dans le cadre central en n'utilisant pas JavaScript. 

Exercice 9 : Utilisez la division operee dans l'exercice 4 pour afficher les cibles des liens 
dans le cadre inferieur droit au moyen de JavaScript. 
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Introduction a CSS 



La creation de styles CSS (Cascading Style Sheets ou feuilles de style en cascade) est le 
complement indispensable du langage XHTML. Ce precede correspond parfaitement a 
la separation du contenu et de la presentation sur laquelle nous avons plusieurs fois 
insiste en decrivant les differents elements XHTML. D'une part, cette separation permet 
d'alleger les pages en centralisant les definitions des styles en un point unique, une seule 
definition pouvant s'appliquer a un grand nombre d'elements. D'autre part, elle facilite 
egalement la maintenance et revolution des sites par voie de consequence. Elle apporte 
aussi une plus grande rigueur dans la conception des pages et peut permettre un travail 
collaboratif entre plusieurs programmeurs travaillant en parallele, d'ou une reduction des 
delais de fabrication. A 1' attention de ceux pour qui ces points peuvent paraitrent margi- 
naux, nous pouvons ajouter que les styles CSS apportent une bien plus grande richesse 
creative que ne le permettait le langage HTML utilise sans CSS. Pour egaler les possibi- 
lity graphiques de l'association XHTML et CSS, il aurait fallu alourdir de quantite 
d'elements specifiques le langage XHTML, alors que la tendance actuelle est a l'opera- 
tion inverse, pour rapprocher XHTML de XML. Dans ce chapitre d' introduction aux 
styles CSS, nous allons done aborder les bases indispensables a la comprehension de leur 
mecanisme. Apres les regies generales d'ecriture d'un style qui s'averent simples, nous 
envisagerons toutes les nombreuses possibilites d'ecriture des selecteurs qui permettent 
d'appliquer le style voulu a l'element voulu, quel que soit son contexte. Nous termine- 
rons cette introduction par l'etude des differentes methodes d'insertion des styles dans 
une page, puis par les regies de cascade (le « Cascading » de CSS) et d'heritage, dont la 
connaissance permet de gerer les situations complexes d' attribution des styles a un 
element. 



Les styles CSS 

Partie II 



Creer des styles 

Les regies generates 

Avant d'aborder les differents meandres de la creation de styles, il faut assimiler quel- 
ques regies de base et en particulier la syntaxe de la declaration d'un style (nous parlerons 
souvent par la suite de « style » au lieu de « declaration de style »). 

Une declaration de style comporte plusieurs parties, selon l'ordre suivant : 

• Un selecteur qui va determiner a quel element et eventuellement dans quelles condi- 
tions va s'appliquer le style. Autant que les proprietes, c'est la variete des selecteurs 
qui fait la richesse de CSS. 

• La declaration des proprietes que Ton veut voir appliquees a l'element selectionne. 
Elle doit etre incluse entre des accolades ouvrante ({) et fermante (}). 

• Dans ces accolades doivent apparaitre une ou plusieurs proprietes determinees cha- 
cune par un mot-cle propre a CSS suivi du caractere deux -points (:), puis de la valeur 
attribute a cette propriete. Si nous definissons plusieurs proprietes dans le meme 
style, il faut separer chaque declaration de la precedente par le caractere point- 
virgule (;). Les proprietes sont en nombre limite et font l'objet d'une recommanda- 
tion du W3C (voir 1' annexe B). La version actuelle de CSS est la version 2.1 (au 13 juin 
2005), dans laquelle ont ete eliminees un certain nombre de proprietes qui n'etaient 
mises en application par aucun navigateur. C'est cette version que nous emploierons 
ici. A chaque propriete correspond un domaine de valeurs particulier constitue par 
exemple de mots-cles ou de nombres. Vous trouverez dans 1' annexe B la liste des 
proprietes CSS 2.1 et l'eventail de leurs valeurs. Signalons enfin que l'utilisation 
d'une propriete ou d'une valeur erronee ne provoque pas d'erreur lors de 1' execution 
comme ce serait le cas dans un langage de programmation. Ces fausses definitions sont 
simplement ignorees. 

La figure 9-1 resume la syntaxe d'ecriture d'un style. 



Figure 9-1 

Syntaxe d'ecriture 
d'un style 



selecteur 



{ proprietel : valeurl ; propriete2 : valeur2 ; \ 



Sur ce modele, nous pouvons par exemple ecrire le style suivant : 

div {color : red ; background-color :yellow ;} 

dans lequel div est le selecteur, color est la premiere propriete qui determine la couleur 
du texte de l'element, red la valeur attribuee a cette couleur, background-col or qui designe 
la couleur de fond est la seconde propriete et yel 1 ow sa valeur. Tous les elements <di v> de 
la page dans laquelle se trouve cette declaration ont done un contenu ecrit en rouge sur 
fond jaune. 
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Validation du code CSS 

Comme pour le code XHTML, il est possible de verifier la validite des feuilles de style 
CSS en se connectant sur le site http://jigsaw.w3.org/css-validator/. 

Le validateur signale les erreurs et permet d'apporter les corrections necessaires. La 
figure 9-2 montre la page d'accueil du site dans lequel on peut valider le code CSS inclus 
dans une page XHTML (avec l'extension . htm ou . html ) ou dans un fichier externe (avec 
1' extension .ess) situe sur un serveur (repere Q), ou encore inclus dans un fichier local a 
condition qu'il ne contienne que du code CSS (repere ©) 
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Figure 9-2 

La page de validation des feuilles de style 



Les selecteurs 

Une des grandes richesses de CSS est la multiplicity des possibilites de selection des ele- 
ments auxquels on veut attribuer un style donne. Cette tres grande diversite permet en 
effet d'appliquer un style aussi facilement a tous les elements, en une seule ligne de code, 
qu'a un unique element isole dans la page web, sans avoir a ecrire la definition locale- 
ment. De plus, la combinaison de plusieurs selecteurs dans la me me declaration ouvre la 
voie a une quasi-infinite de combinaisons, propres a repondre a tous les besoins, meme 
les plus complexes. 
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Selectionner un seul element 

II s'agit de la selection la plus simple, puisque le selecteur est constitue du nom de 1' element 
sans les caracteres de debut < et de fin de balise />. Nous ecrivons par exemple : 

p {color : yellow ; background-color :blue;} 

pour que le texte de tous les paragraphes figure en jaune sur fond bleu. 

Nous pouvons ainsi definir un style propre a chaque element comme il en existe un par 
defaut dans les navigateurs. 

Selectionner plusieurs elements 

Nous pouvons tres facilement appliquer le meme style a plusieurs elements differents en 
les enumerant et en les separant par une virgule dans le selecteur. Plutot que de multiplier 
les definitions : 

hi {color : black ; background-color : red;} 
div {color : black ; background-color : red;} 
p {color : black ; background-color : red;} 

nous pouvons ecrire le style suivant : 

hi, div, p {color : black ; background-color : red;} 

Cette possibilite de regroupement peut etre utile pour definir des styles communs a un 
ensemble d' elements en ecrivant ce type de selecteur pour cet ensemble, puis en ajoutant 
d'autres proprietes specifiques a un des elements de la liste. On definit ainsi une sorte de 
tronc commun a un groupe, puis on affine chacun de ses composants. 

Si nous ecrivons par exemple le code suivant : 

hi, div, p {color : black ; background-color : red;} 
div {margin : 20px;} 

1' element <div> va avoir a la fois un texte noir, un fond rouge et une marge de 20 pixels, 
car la propriete margin, definie uniquement pour l'element <div>, s'ajoute a celles deja 
definies pour le selecteur d'elements hi , div, p. 

Le selecteur universel 

Pour appliquer un style a tous les elements, nous utiliserons le selecteur universel * avant 
la definition d'une ou plusieurs proprietes. Par exemple, pour que la couleur du fond de 
tous les elements soit le jaune, nous ecrirons : 

*{background-color : yellow;} 

Cela n'empeche pas de modifier cette couleur de fond pour un element particulier, en la 
redefinissant uniquement pour celui-ci, par exemple : 

*{background-color : yellow;} 
p{background-color : gray;} 
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Dans ce cas, tous les elements ont un fond jaune, sauf <p> qui a un fond gris redefini 
specialement. 

Les classes 

Nous avons vu que tous les elements XHTML possedent l'attribut cl ass. Ce dernier per- 
met d'appliquer un style defini dans une classe a un element dont l'attribut cl ass se voit 
attribuer le nom de cette classe. Pour creer une classe, le selecteur est constitue du nom 
choisi pour la classe precede d'un point (.). Le nom de la classe peut etre un mot quel- 
conque, en evitant quand meme les noms des proprietes CSS et des elements XHTML 
car cela occasionnerait des confusions. Nous pouvons par exemple definir la classe nominee 
evidence en ecrivant le code : 

.evidence {color : red;} 

A ce stade, la classe est abstraite et ne s' applique a aucun element. Pour mettre en evi- 
dence un paragraphe precis de la page avec un texte rouge, nous devons alors ecrire dans 
le code XHTML : 

<p cl ass="evidence">Texte contenu du paragraphe</p> 

Le texte des autres paragraphes a toujours la couleur qui lui a ete attribute par ailleurs ou 
la couleur par defaut (noire). 

Les classes presentent l'interet de pouvoir s'appliquer a n'importe quel element, 
n'importe ou dans le code de la page. Notre classe evidence peut done s'appliquer a un 
titre <hl>, une division <div> ou un element <span>, simplement en ecrivant pour chacun 
d'entre eux l'attribut cl ass="evidence". 

Nous pouvons egalement definir une classe en la declarant applicable seulement a un ele- 
ment en faisant preceder son nom de celui de l'element. Nous pouvons ecrire par exemple : 

div. jaune {color : yellow;} 

Dans ce cas, seules les divisions ayant un attribut class dont la valeur est jaune ont un 
texte jaune. Les autres elements, et meme s'ils ont le meme attribut avec la meme valeur, 
n'ont pas de style defini dans cette classe. 

Le selecteur universel * peut egalement etre employe a la place du nom d'un element 
dans la definition d'une classe. Le style s'applique alors a tous les elements dont l'attribut 
cl ass a pour valeur le nom de la classe. Nous ecrivons alors par exemple : 

div. jaune {color ; yellow;} 

II est possible de definir d'abord une classe abstraite, puis de la particulariser en ajoutant une 
autre propriete pour un element qui utilisera la meme classe. Dans le code CSS ci-apres : 

.rouge {color : red;} 

div. rouge {background-color ; blue;} 

suivi du code XHTML dans la page, 

<div cl ass="rouge">Texte contenu de la division </div> 
le texte contenu dans l'element <div> est affiche en rouge sur fond bleu. 
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Appliquer plusieurs classes au meme element 

L'avantage de definir des classes abstraites est, nous l'avons vu, qu'elles peuvent s'appli- 
quer a n'importe quel element. Leur puissance peut etre multipliee car nous pouvons 
appliquer plusieurs classes independantes a un meme element. Celui-ci a alors la combi- 
naison des proprietes de chacune des classes. Pour utiliser plusieurs classes dans le meme 
element XHTML, il faut donner a son attribut class la liste des noms des classes en les 
separant par un espace comme ceci : 

<div cl ass="cl assel classe2"> Ceci est un texte avec la classe 1 et 2 </div> 

Les combinaisons d'emploi des classes sont alors multiples, chaque classe pouvant definir 
une caracteristique, et chaque element pouvant en utiliser plusieurs au choix. 

L'exemple 9-1 en donne une illustration. Nous y definissons cinq classes. La premiere, 
nommee jaune, (repere ©) permet de verifier le fonctionnement du selecteur universel 
dans une classe. Elle s'applique au titre <hl> qui utilise la classe jaune et est affichee en 
vert. La deuxieme, qui porte le meme nom que la precedente, est affectee a l'element 
<div> et cree un texte en jaune (repere ©). Quand l'attribut class d'un element <div> a 
pour valeur jaune, ce n'est pas la premiere classe qui est utilisee mais la seconde. La troi- 
sieme cree un texte en rouge (repere ©), la suivante un texte en italique (repere ©) et la 
derniere cree un fond gris (repere 0). Les differents elements <div> de la page utilisent 
ces differentes classes. Le premier (repere ©) utilise celle qui est nommee cl assel et son 
texte est done rouge. Le deuxieme (repere ©) utilise les deux classes nominees cl assel 
et cl asse2, et il combine a la fois un texte rouge et en italique. Le troisieme (repere ©) 
utilise les classes nominees cl assel et classe3 et a done un texte rouge sur fond gris. 
Enfin, la derniere (repere ©) utilise les classes jaune, classe2 et classe3. Elle a done les 
proprietes de ces trois classes, a savoir un texte jaune, en italique et un fond gris. 

Exemple 9-1. Utilisation de plusieurs classes 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 
<head> 

<title> Les classes de style </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css" titl e="cl asses"> 

*. jaunefcolor: green;}© 

di v . jaune (color: yellow;}© 

.classel (color: red;}© 

.classe2 (font-style: italic}© 

.classe3 (background-color: #CCC;}© 
</style> 
</head> 
<body> 

<hl class="jaune">XHTML et CSS</hl>© 
<div class="classel">© 
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Ceci est un texte avec la classe Ktexte rougeXbr /Xbr /> 
</div> 

<div cl ass="cl assel classe2">© 

Ceci est un texte avec la classe 1 et 2 (texte rouge et en italiqueXbr /Xbr /> 
</div> 

<div cl ass="cl assel classe3">Q 

Ceci est un texte avec les classes 1 et 3 (texte rouge et fond grisXbr /Xbr /> 
</div> 

<div class="jaune classe2 classe3">© 
Ceci est un texte avec les classes div.jaune, 2 et 3 (texte jaune, en italique 
et fond gris) 
</div> 
</body> 
</html> 



La figure 9-3 donne un apercu du resultat obtenu. 



Figure 9-3 
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Selecteur d'identifiant id 

Pratiquement, chaque element peut avoir un attribut i d qui doit etre unique dans une page 
donnee. Nous pouvons ecrire un style qui ne sera applicable qu'a l'element dont l'id a 
une valeur precise en donnant cette valeur au selecteur (comme pour une classe) et en le 
faisant preceder du caractere diese (#). 

En ecrivant le style suivant : 

div {color: black;} 

#bleu {color: white; background-color: blue;} 



puis le code XHTML : 



<div id="bleu">Texte en blanc sur bleu</div> 
<div>Texte en noir </div> 
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seul l'element <div> contenant l'attribut id="bleu" beneficie du texte en blanc sur fond 
bleu, et aucun autre, car l'identifiant doit etre unique dans une page, et les autres ele- 
ments <div> ont un texte noir. Ce type de definition est tres cible car le style ne peut 
s'appliquer qu'a un seul element du fait de l'unicite de l'identinant id. 



La casse des identif iants 

Les valeurs de l'attribut id sont sensibles a la casse en XHTML ; bl eu et Bl eu sont done deux identi- 
fiants differents (sauf dans Internet Explorer pour qui la casse importe peu). 



Les selecteurs d'attributs 

II est egalement possible d'appliquer un style a un element determine des qu'il possede 
un attribut donne, quelle que soit la valeur de cet attribut. Pour appliquer ce selecteur, le 
nom de l'element doit etre suivi du nom de l'attribut place entre crochets ([) et (]). En 
definissant le style suivant : 

acronym[title] {color: red; background-color: gray;} 

tous les elements <acronym> qui possedent un attribut title, quelle que soit sa valeur, ont 
un contenu affiche en rouge sur fond gris, ce qui permet d'attirer l'attention du visiteur 
afin qu'il laisse le curseur sur le contenu pour voir apparaitre la bulle d'aide donnant la 
signification de l'acronyme (voir l'exemple 9-2 reperes ©- © et ©). 

De meme, en definissant le style pour l'element <img /> 

j| img[l ongdesc] {border-color: red; border-weight: 2px;} 

toutes les images ayant un attribut 1 ongdesc ont une bordure rouge de deux pixels de large 
(voir l'exemple 9-2 reperes Q. © et ©). Nous pouvons egalement creer un style applica- 
ble a tous les elements qui possedent un attribut donne en utilisant le selecteur universel 
* place devant les crochets qui contiennent le nom de l'attribut choisi. Si nous definissons 
le style suivant : 

*[title] {background-color: yellow;} 

ce sont tous les elements ayant l'attribut title qui sont affiches avec un fond jaune. 

Comme pour les classes, il est possible de selectionner plusieurs attributs pour un ele- 
ment en faisant suivre son nom de plusieurs attributs entre crochets. Si nous ecrivons le 
style suivant : 

h2[ti tl e] [id] {background-col or: yel 1 ow; } 

seuls les titres <h2> ayant a la fois les attributs title et id ont une couleur de fond jaune 
(voir l'exemple 9-2 reperes © et ©). 
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Les selecteurs de valeur d'attribut 

Le selecteur precedent applique un style a un element par la seule presence d'un attribut 
precis. Pour affiner ce systeme, nous pouvons egalement appliquer un style a un element 
a condition que tel attribut ait une valeur precise en utilisant la syntaxe suivante : 

| element [attribut="valeur"] (Definition du style;} 

En ecrivant le style suivant : 

code[title="code JavaScript"] {color: blue;} 

tout le contenu des elements <code> ayant l'attribut title dont la valeur est la chaine code 
JavaScript sera affiche avec une police de taille 12 pixels (voir l'exemple 9-2 reperes 
et ©). La comparaison des valeurs est effectuee au caractere pres, par consequent un ele- 
ment <code> dont l'attribut title aurait la valeur code JavaScript, avec simplement un 
espace supplementaire, ne repondrait pas a la condition posee. 

II est ici possible de particulariser davantage 1' application du style en selectionnant plusieurs 
attributs et leurs valeurs en utilisant la syntaxe : 

element[attributl="valeurl"][attribut2="valeur2"] {Definition du style;} 

Par exemple, avec la definition suivante, appliquee a une cellule de tableau : 

td {font-size: 12px;} 

td [title="nom"] [align="center"] {font-size: 14px; color: red;} 

seules les cellules ayant un attribut title avec la valeur nom et un attribut align ayant la 
valeur center sont afriches avec un texte rouge et avec une taille de fonte de 14 pixels, 
alors que le texte des autres cellules a une taille de 12 pixels. 

Les exemples precedents impliquent que l'attribut ait exactement la valeur fixee. II est 
possible d'etendre encore ce selecteur en attribuant un style a tous les elements, dont un 
attribut donne a une valeur qui ne correspond que partiellement a une chaine donnee. 
Pour se voir attribuer le style, les elements pourront contenir autre chose en plus de la 
valeur fixee. Pour obtenir cette selection, il faut utiliser la syntaxe suivante, dans laquelle 
le signe = est remplace par ~= : 

element [attribut ~="valeur"] {Definition des styles;} 

En ecrivant par exemple le style suivant : 

td[id ~="nom"]{background-color: #222;color: white;} 

toutes les cellules du tableau dont l'attribut id contient la valeur nom seront afhchees avec 
un fond gris fonce et en caracteres blancs (voir l'exemple 9-2 reperes ©, © © et ©). 
Cette possibility pourrait par exemple etre exploitee quand un tableau est construit dyna- 
miquement par un script, l'attribut id etant cree comme la concatenation de la chaine nom 
d'un espace et d'un nombre entier (les chaines noml ou prenom ne conviennent pas). 

Si nous appliquons ce style au code XHTML suivant : 

<tr> 

<td id = "nom 1"> Engels</td> 
<td id = "prenom"> Jean</td> 
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</tr> 
<tr> 

<td id = "nom 2"> Geelsen</td> 
<td id = "prenom"> Jan</td> 
</tr> 

<tr> <td id="editeur"> Eyrolles </td> <td>Paris</td></tr> 

seules les premieres cellules des deux premieres lignes du tableau ont un contenu affiche 
en blanc sur fond gris. 

Une derniere possibilite consiste a attribuer un style a un element dont la valeur d'un 
attribut donne commence par une chaine fixee. Pour cela, le signe egal (=) doit etre precede 
du signe | selon la syntaxe suivante : 

j element [attribut |="valeur"] {Definition des styles;} 

Dans l'exemple suivant : 

td[id |="nom"] {font-style: italic;} 

toutes les cellules de tableau creees par les elements <td> dont l'attribut i d commence par 
la chaine nom devraient avoir un contenu affiche en italique. Je precise qu'a ce jour aucun 
navigateur ne gere ce selecteur. 

L'exemple 9-2 resume toutes les possibilites d' utilisation des selecteurs de valeur d' attribut 
que nous venons d' aborder. 

Exemple 9-2. Les selecteurs d'attrlbuts 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les selecteurs d'attributs</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css"> 

acronym[title] {color: red; background-color: gray;}© 

img[longdesc]{border: 2em red double}© 

*[ti tie] {background-col or: #EEE;}© 

h2[title][id]{background-color: gray; color: yellow;}© 

code[title="code JavaScript"]{color: blue;}© 

td{background-color: #AAA; color: blue;}© 

td[id ~="nom"]{background-color: #222; color: white;}© 
</style> 
</head> 
<body> 

©<hl title="Les outils du Web" >XHTML et CSS</hl> 
©<h2 title="Les outils du Web" id="xhtml ">XHTML l.K/h2> 
©<h2 title="Les outils du Web" >CSS 2.1</h2> 

<p>©<acronym title="eXtensible HyperText Markup Language">XHTML</acronym> et 
©<acronym>CSS 2 . K/acronymXbr /Xbr /> 
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©<img src=" . ./images/f rance.gif " alt="France" 

1 ongdesc="funhtml .com/f ranee. html " /> 
©<img src=" . ./images/france.gif" alt="France" /> 
©<code title="code JavaScript">Code JavaScript</code> 
</p> 

<table border="l"> 
<tr> 

©<td id = " nom 1 "> Engels </td> 

<td id = " prenom "> Jean </td> 
</tr> 
<tr> 

©<td id = " nom 2 "> Geelsen </td> 

<td id = " prenom "> Jan </td> 
</tr> 
<tr> 

©<td id="editeur"> Eyrol 1 es</td> 
<td> Paris </td> 
</tr> 
</table> 
</body> 
</html> 



La figure 9-4 montre les resultats obtenus pour ces definitions de styles. 



Figure 9-4 
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Note 

Internet Explorer ignore ces selecteurs. 



Les selecteurs contextuels parent-descendant 

Plutot que de definir un style pour toutes les occurrences d'un element, nous pouvons 
souhaiter ne l'appliquer qu'en fonction de sa position relative par rapport a un autre dans 
la hierarchie des elements de la page. Ce type de selecteur est dit contextuel. Nous pou- 
vons par exemple definir un style general pour 1' element <p> et vouloir lui en appliquer 
un autre quand il se trouve inclus dans un element <div>. Pour cela, il faut utiliser la 
syntaxe suivante : 

el ement_parent el ement_enfant {Definition des styles;} 

En ecrivant par exemple le style suivant : 

p {color: blue;} 
div p{color: red;} 

et en l'appliquant au code XHTML ci-apres : 

<div>Texte de la division 

<p>Texte du paragraphe inclus dans div</p></div> 
<p>Texte d'un paragraphe non inclus dans div</p> 

seuls les contenus des elements <p> inclus dans <div> sont de couleur rouge, tous les 
autres etant bleus, et le texte inclus directement dans <di v> a la couleur par defaut qui est 
le noir. 

II est aussi possible de preciser la hierarchie en appliquant plus de deux elements en les 
separant tous par un espace. 

Pour appliquer un style different aux elements de liste <li> inclus directement dans une 
liste non ordonnee <ul > ou dans une liste ordonnee <ol > elle-meme incluse dans une liste 
non ordonnee <ul >, nous pouvons definir les selecteurs suivants : 

ul li {background-color: #EEE; color: black;} 

ul li ol li (background-color: gray; color: white;} 

Une fois qu'ils sont appliques au code des listes ci-apres : 

<ul> 

<1 i > Item de ni veau 1 

<ol> 

<li> Item de niveau 2 A </li> 
<li> Item de niveau 2 B</li> 
<li> Item de niveau 2 C</li> 
</ol> 
</li> 
</ul> 
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nous obtenons pour les items de niveau 1 un texte noir sur fond gris, et pour les trois 
items de niveau 2, un texte blanc sur fond gris comme le montre la figure 9-5. 



Les selecteurs parent-enfant directs 

Nous pourrons preciser le selecteur precedent en n'appliquant qu'un style a un element a 
condition qu'il soit un enfant direct d'un autre element et non plus un descendant indirect 
(comme dans la relation petit-enfant/grand-parent). 

Pour operer ce type de selection, il faut utiliser la syntaxe : 

el ement_parent > el ement_enf ant {Definitions des styles;} 

dans laquelle la presence d'un espace entre chaque element et le symbole > est autorisee 
mais non signifiante. 

En ecrivant par exemple le style suivant : 

span {color: blue;} 

di v > span{color: red; background-color: #EEE;} 

et en l'appliquant au code XHTML suivant : 

<div>Les standards <span>XHTML l.K/span>© et <span>CSS 2.1</span>© 

s'imposent aujourd'hui 
<p>Texte d'un <span>paragraphe</span>© inclus dans div</p> 
</div> 

<p>Texte d'un <span>paragraphe</span>© non inclus dans div</p> 

seul le contenu des paragraphes <span> qui sont des elements enfants directement inclus 
dans une division <di v> (reperes Q et ©) est affiche en rouge sur fond gris, les autres ele- 
ments <span> (reperes Q et ©) n'etant pas des enfants directs de <di v> ont un texte bleu. 



Note 

Internet Explorer ignore ces selecteurs. 



Les selecteurs d 'elements adjacents 

Les selecteurs precedents font appel a la notion de descendance parent enfant. Si on 
considere dans le code de la page deux elements consecutifs enfants du meme parent, 
comme deux elements de bloc <div> inclus dans <body> par exemple, il n'existe pas de 
relation de descendance entre eux mais une relation de fratrie. Pour selectionner ce type 



Figure 9-5 

Les selecteurs 
contextuels parent- 
descendant 



# 



Item de niveau 1 




Les styles CSS 



Partie II 



de relation entre elements, nous disposons du selecteur + qu'il faut utiliser en adoptant la 
syntaxe suivante : 

el ementl+el ement2 {Definitions des styles;} 

Dans ce cas, le style s'appliquera a l'element de type 2 uniquement s'il suit immediate- 
ment un element de type 1 dans le code XHTML sans y etre inclus. Si nous definissons 
les styles suivants : 



p {background-color: yellow; color: blue;} 
div+p {background-color: blue; color: yellow;! 



puis le code XHTML ci-apres 



<div>Les standards XHTML 1.1 et CSS 2.1 s'imposent aujourd'hui 
<p>Texte d'un paragraphe enfant de div</p> 
</div> 

<p>Texte d'un paragraphe frere de div</p> 
<p>Texte d'un paragraphe frere de div</p> 

seul le deuxieme element <p> a le style : « texte jaune sur fond bleu », le premier n'etant 
pas frere mais enfant de l'element <div>. Le troisieme paragraphe aura de plus le meme 
style que le premier car il ne suit pas immediatement l'element <di v>. 

On note que si les deux elements sont relies par le selecteur +, seul le second presente un 
style defini. En effet, si nous definissons le code suivant au lieu des styles precedents : 

p {background-color: yellow; color: blue;} 
p+p (background-color: blue; color: yellow;} 

et si nous l'appliquons au meme code XHTML que precedemment, seul le troisieme 
paragraphe a le style « texte jaune sur fond bleu ». Les premier et deuxieme paragraphes 
bien qu'etant consecutifs n'ont pas le meme parent direct. Notons encore qu'avec ce der- 
nier style, si un element <div> contenait plus de deux elements <p>, le style « jaune sur 
bleu » cree avec le selecteur p+p s'appliquerait a tous les paragraphes enfants de <div> 
sauf le premier. De meme, s'il existait deux paragraphes consecutifs en dehors de l'element 
<div>, le second beneficierait egalement du meme style. 



Note 

Internet Explorer ignore tout de ces selecteurs. 



Pseudo-classes et pseudo-elements 

Les selecteurs precedents permettent d'attribuer un style a un ou plusieurs elements bien 
dermis dans la hierarchie d'un document XHTML. Les pseudo-classes et les pseudo-ele- 
ments permettent d'attribuer un style a une partie abstraite d'un document non identifiable 
dans cette hierarchie, par exemple le premier caractere ou la premiere ligne d'un paragra- 
phe. D'autres pseudo-classes permettent d'attribuer un style a un document en fonction 
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des actions previsibles mais non determinees de l'utilisateur final, par exemple le fait de 
placer son curseur sur un lien ou un composant de formulaire. 

Les pseudo-classes applicables aux liens 

Deux pseudo-classes specifiques aux elements possedent un attribut href faisant refe- 
rence a un document externe (lien vers une autre page) ou interne (ancre vers une partie 
du meme document). II s'agit des pseudo-classes suivantes : 

• : 1 i n k, qui permet d'attribuer un style a un lien qui pointe vers un document non encore 
vu. C'est l'etat normal de tous les liens a l'ouverture de la page. 

• : visited, pour attribuer un style a un lien qui pointe vers un document deja vu, apres 
un retour sur la page d'origine. 

Avec ces pseudo-classes, on pourra par exemple attribuer une valeur ou une taille de 
police specifique au texte des liens visites ou pas. Nous les etudierons en detail au chapi- 
tre 12. Pour les employer, il faut faire preceder le nom de la pseudo-classe de celui de 
l'element selon le modele suivant concernant l'element <a> : 

a:link {color: blue;} 
a: visited {color: red;) 

Les pseudo-classes dynamiques 

Elles permettent d'attribuer un style a un element en fonction des actions effectuees par 
le visiteur. Ces pseudo-classes sont dynamiques car le style attribue disparait avec le 
motif de leur creation. Elles sont au nombre de trois : 

• : focus, pour attribuer un style a l'element qui a le focus, soit qu'il lui ait ete donne par 
le code XHTML a l'aide des attributs tabindex ou accesskey, soit qu'il l'ait obtenu 
par un deplacement du pointeur provoque par l'internaute. Le style disparait quand 
l'element perd le focus. Cette pseudo-classe est mal prise en compte par les naviga- 
teurs actuels. Nous pouvons definir par exemple les styles suivants pour affecter les 
elements <a> et <i nput /> quand ils recoivent le focus : 

a:focus{color: red;) 

input: focus {background-col or: blue; } 

• : hover, pour attribuer un style a un element visible dont la zone est survolee par le 
pointeur de la souris. Quand le pointeur quitte cette zone, le style est annule, ce qui 
peut produire des effets visuels interessants. Dans le style suivant, les divisions qui 
sont survolees par le curseur ont un fond rouge et un texte blanc le temps du survol. 

div:hover{backround-color: red; color: white;} 

• : active, pour attribuer un style a un element dit actif, c'est-a-dire quand l'utilisateur 
clique sur son contenu. La aussi, l'effet est transitoire et ne dure que le temps de l'acti- 
vation de l'element. 

a:active{background-red; color: yellow;) 
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Nous utiliserons ces pseudo-classes de maniere plus approfondie au chapitre 12. Les 
pseudo-classes dynamiques sont mal prises en compte par les navigateurs actuels. 

Pseudo-classes diverses 

On peut aussi mentionner l'existence de deux autres pseudo-classes d'usage assez general. 

• : f i rst-chi 1 d, qui permet d'appliquer un style a un element donne uniquement s'il est 
le premier enfant d'un autre element. L'element parent n'est pas nomme et peut etre 
quelconque (a condition de respecter les regies d'inclusion parent-enfant de la DTD). 
En ecrivant par exemple le style : 

span : f i rsthi 1 d {background-color: red; color: white;} 

puis le code XHTML ci-apres : 

<div>Les standards tels que <span>XHTML l.K/span> et <span>CSS 2.1</span> 
s'imposent aujourd'hui</div> 

seul le texte du premier element <span> contenu dans <di v> est de couleur blanche avec 
un fond rouge. De meme, en ecrivant le style suivant : 

a : f i rst-chi 1 d {backgroor: red; color: white;} 

et en l'appliquant dans l'exemple de code XHTML : 

<p> Liens utiles : 

<a href= "w3.org" alt="w3c"> W3C </a>   

<a href= "php.net" alt= "PHP"> PHP</a> 

</p> 

seul le texte « W3C » sera en rouge puisque le lien est le premier enfant du paragraphe <p>. 

• :lang(code), qui ressemble au selecteur base sur la valeur d'un attribut car il permet 
d'attribuer un style a un element si son attribut 1 ang a la valeur precisee par son code de 
langue. En ecrivant par exemple : 

p:lang (fr) {color: black;} 
p:lang (en-us) {color: gray;} 

les paragraphes ayant l'attribut xml :lang="fr" sont affiches en caracteres noirs et ceux 
ayant l'attribut xml :lang="en-us" seront affiches en gris. Cette pseudo-classe est mal 
prise en compte par les navigateurs actuels. 

Les pseudo-elements 

Leur nom vient de ce qu'ils permettent d'agir sur une partie du contenu d'un element 
comme s'il etait contenu dans un nouvel element fictif. On denombre les quatre pseudo- 
elements suivants : 

• :fi rst- letter, qui permet d'affecter un style a la premiere lettre du contenu d'un ele- 
ment indique avant ce selecteur. On 1' utilise classiquement pour creer des effets de let- 
trines en definissant pour ce selecteur une taille de caracteres tres superieure a la taille 
de l'element. En ecrivant par exemple le style suivant : 

p:first-letter {fonize: 300%; color: blue;} 



Introduction a CSS 



Chapitre 9 



la premiere lettre de chaque paragraphe sera trois fois plus grande que les autres et de 
couleur bleue. Le pseudo-element :f i rst-1 etter n'admet que les proprietes suivantes : 

font, font-size, font-family, font-style, font-weight, color, background, margin, 
padding, border, text-decoration, vertical-align, text-transform, line-height, 
float, letter-spacing, word-spacing, clear. 

• :ff rst-1 ine, qui permet d'affecter un style a la premiere ligne du contenu de l'element 
indique. Cet affichage permet d'attirer 1' attention sur un texte. En ecrivant le style 
suivant : 

div:first{font-size: 1S0%; font-weight: bold;} 

la premiere ligne de chaque division sera affichee en gras et dans une taille 1,5 fois 
plus grande que la police en cours. Le pseudo-element :fi rst-1 ine n'admet que les 
proprietes suivantes : 

font, font-size, font-family, font-style, font-weight, color, background, 
word-spacing, letter-spacing, text-decoration, vertical -al ign , text-transform, 
1 i ne-hei ght . 

• : before, qui permet d'inserer un contenu dote d'un style particulier avant le contenu reel 
de l'element precise, en l'associant avec la propriete content. En ecrivant le style suivant : 

cite:beforeontent: "<<" ; font-weight: bold;} 

chaque contenu d'une citation <cite> sera precede des caracteres « en gras. 

• : after, qui joue un role similaire au precedent mais definit un contenu dote d'un style 
a la fin du contenu de l'element utilise. En ecrivant : 

cite:after {cnt: ">>" ;font-weight: bold;} 

chaque citation contenu dans l'element <cite> sera suivie des caracteres » en gras. 



La declaration Umportant 

Chaque declaration de style peut revetir un caractere de plus grande importance par rap- 
port a une autre declaration concernant le meme element et la meme propriete qui com- 
porte une valeur differente. Ces deux declarations peuvent entrer en conflit au moment de 
la creation de la presentation par le navigateur. Pour donner cette importance a un style, 
il faut inserer la declaration d'importance a l'aide du mot-cle 'important en le placant 
entre la valeur attribuee a la propriete et le point-virgule qui termine la declaration. Dans 
l'exemple suivant : 

*{color: black limportant; background-color: yellow;} 
divfcolor: blue; background-color: white;} 

les couleurs de texte et de fond des selecteurs * et di v sont en conflit, mais comme la pro- 
priete col or definie dans le selecteur universel * est marquee ! important, le texte de la divi- 
sion figure en noir. En revanche, le fond de la division est de couleur blanche car la valeur 
yellow n'est pas marquee limportant et que la declaration faite dans di v est specifique. 
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Nous reviendrons en detail sur les regies de priorites dans la section consacree a la defi- 
nition des effets de cascade en fin de chapitre. 

II est evidemment possible d'utiliser la declaration ! important pour plusieurs proprietes 
dans la meme declaration, par exemple : 

*{color: black Mmportant; background-color: yellow [important;} 
divfcolor: blue; background-color: white;} 

Dans ce cas, tous les elements <div> ont un contenu affiche en noir sur fond jaune, et tous 
les styles definis en propre pour cet element sont ignores. 

Ecrire des feuilles de style 

Nous allons envisager maintenant les differentes methodes d'ecriture des style CSS et la 
facon dont on peut les lier a un document XHTML. 



Dans /'element <style> 

Defini dans la premiere partie de ce livre, l'element <styl e> a pour vocation de renfermer 
les definitions des styles CSS utilisables dans la page qui le contient. Rappelons qu'il doit 
toujours etre inclus dans l'element <head> et qu'il ne peut contenir que des definitions de 
styles CSS et des commentaires XHTML delimites par <! - - et --> ou des commentaires 
CSS delimites par /* et */. 

Dans l'eventualite oil toutes les pages d'un site ont en commun un certain nombre de sty- 
les et que chaque page possede quelques styles propres, les styles communs peuvent etre 
ecrits dans un fichier externe (voir la section suivante) et inclus dans l'element <styl e> au 
moyen de la directive ©import selon la syntaxe suivante : 

©import url (fichier . ess ) ; 

LURL du fichier peut etre relative ou absolue et elle peut etre suivie de la designation du 
media auquel les styles importes doivent s'appliquer specifiquement. La page web a alors 
le comportement correspondant au cas ou tous les styles contenus dans le fichier 
fichier. ess sont ecrits explicitement dans l'element <style>. Cette directive doit figurer 
avant les autres definitions de style. Un element <style> peut done avoir la structure sui- 
vante, et comporter plusieurs directives ©import : 

<style type= "text/css"> 

©import url (commun. css)all ; 

©import url (ecran.css)screen; 

©import url (imprimante.css)print; 

div.p {font-style: italic;} 

hi , h2 {color: red;} 
</style> 
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Si les styles definis apres la directive ©import sont en contradiction avec ceux qui sont 
contenus dans le fichier importe, les conflits eventuels sont tranches selon les regies definies 
dans la section concernant les effets de cascade dans ce chapitre. 

Dans un fichier externe 

La tendance actuelle etant a la recommandation de la separation du contenu et de la presen- 
tation des pages web, l'ecriture des styles dans les fichiers externes est fortement conseillee, 
meme si dans nos exemples nous ne l'utiliserons que tres peu par commodite de presentation. 
II s'agit de fichiers ecrits en texte brut realisables avec un editeur simple comme le Bloc- 
notes de Windows mais aussi avec EditPlus ou meme des editeurs specialises qui fournissent 
une aide a la saisie. Le fichier ne devra contenir que des selecteurs et les definitions des sty- 
les ainsi que des commentaires CSS (delimites par les caracteres /* et */) mais aucune 
balise d'element XHTML. Le fichier CSS doit toujours etre enregistre sous l'extension 
. ess et etre present sur le serveur, tout comme les fichiers XHTML qui l'utilisent. 

L'exemple de code suivant montre un fichier CSS nomme commun .ess. 

/* Styles communs a toutes les pages */ 

/* fichier:« commun. ess » */ 

body {background-color: white; color: marine;} 

hi {color: black; font-size: 20px;} 

div.p {font-size: 12px;} 

a:link {color: blue;} 

a:hover {color: red;} 

Un fichier externe peut inclure les styles d'un autre fichier externe en faisant appel a la 
directive ©import de la meme facon que nous avons definie plus haut pour les elements 
<style>. 

Pour affecter un fichier de styles a une page de code XHTML, il faut utiliser l'element 
<1 i nk /> dans l'en-tete du document avec par exemple le code suivant : 

< 1 ink rel="stylesheet" type="text/css" href="commun.css" media="screen" 
title="Styles de base" /> 

Cet element a ete vu en detail au chapitre 2 mais il n'est pas inutile de rappeler que l'attri- 
but href contient l'adresse relative ou absolue du fichier CSS, ce qui n'interdit pas de lier 
un document XHTML a un fichier CSS present sur un autre serveur. On peut utiliser 
autant d'elements <1 ink /> que souhaite, chacun etant par exemple adapte a un type de 
terminal particulier precise par l'attribut medi a. 

Dans l'attribut style 

Nous signalons cette possibility pour memoire car la DTD XHTML 1 . 1 autorise encore 
la presence de cet attribut. Cependant, il n'est pas conseille de l'utiliser. 

II servait jusqu' a present a creer des styles pour tout element, en particulier pour creer des 
styles tres ponctuels pour l'element <span>. 
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Nous pouvons ecrire par exemple : 

<p> Le langage <span style="color: red "> XHTML </span> represente la derniere 
^» evolution du <span style="color: gray"> HTML </span> </p> 

Dans ce cas, les mots « XHTML » et « HTML » ont respectivement les couleurs rouge et 
grise. 

II va de soi que ce type de code ne correspond en rien a la philosophie de 1' association 
XHTML et CSS, qui commande une separation du contenu et de la mise en forme. De 
plus, toute modification de ces styles demande une exploration de tout le code XHTML 
afin de reperer tous les attributs styl e, ce qui rend la maintenance plus longue a realiser. 

Nous abandonnerons cette possibilite encore offerte, mais appelee a disparaitre. De nom- 
breux moyens existent pour s'en passer. En effet, la creation des classes de styles suivantes 
et leur utilisation via l'attribut class permettent d'obtenir le meme effet que le code 
precedent. 

/*Dans 1 'element style*/ 

.red {color: red;} 

. gri s {color: gray;} 

< !-Dans le corps du document XHTML--> 

<p> Le langage <span class="red"> XHTML </span> represente la derniere evolution 
du <span class="gris"> HTML </span> </p> 

La definition des styles s'y trouve centralisee dans l'element <style> et ce n'est que leur 
utilisation qui est incluse dans le code XHTML. II est done plus aise de proceder a des 
modifications selon les besoins. 



Cascade et heritage 

Savoir definir des styles est une chose, etre stir du resultat final en est une autre. Meme si 
Ton a defini des styles dans l'element <style> ou dans un fichier externe, il faut encore 
tenir compte, en dehors des problemes d' interpretation propres aux differents naviga- 
teurs, du fait que Ton n'est pas le seul a avoir cree des styles pour des selecteurs donnes. 
Les styles CSS ont en effet des origines diverses. lis peuvent provenir du concepteur 
(e'est-a-dire de soi-meme ou « l'auteur » selon le vocable du W3C). II peut s'agir aussi 
de l'utilisateur final qui a la possibilite de definir sa propre feuille de style dans son navi- 
gateur. Meme si les utilisateurs se pretent rarement a cet exercice, cela est possible, en 
particulier pour ceux qui ont des problemes de vue et qui vont definir par exemple un affi- 
chage en tres gros caracteres, ou ceux qui ont des problemes de vision de couleurs et qui 
vont done definir des choix leur permettant d'obtenir un contraste fond/texte lisible. La 
derniere origine des styles est le navigateur lui-meme qui possede sa propre feuille de 
style par defaut, dont un modele est edicte par le W3C, et dont vous trouverez la copie 
dans 1' annexe B. 

C'est la partie logicielle CSS du navigateur qui se charge de resoudre les conflits pouvant 
exister entre les differentes declarations de styles attachees a un element. Les differentes 
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operations permettant d'attribuer finalement un style propre a un element constituent ce 
que Ton nomme les regies de cascade de CSS (d'ou le mot « Cascading » de CSS). Pour 
determiner les priorites, les navigateurs font d'abord l'inventaire de toutes les declara- 
tions qui s'appliquent a un element donne, puis precedent a la selection en fonction de 
differents criteres que nous allons envisager maintenant. 

Selection selon le media 

Les styles pour lesquels le media specifie ne correspond pas au moyen de visualisation 
sont elimines. Le media peut avoir ete indique dans les elements <1 i nk> ou <styl e>, dans 
les deux cas au moyen de l'attribut media (qui peut prendre les valeurs screen, print, pro- 
jection, aural , brail 1 e, handheld, tty, tv et al 1 , dont nous avons deja donne la definition), 
ou encore a la suite de la directive ©import pour ceux qui sont importes directement dans 
l'element <style>. 

Selection selon le createur du style 

Pour un media donne, des regies de priori te sont definies en fonction de l'origine des 
styles et du fait qu'ils soient marques avec la declaration ! important ou pas. Les styles 
marques ! important l'emportent toujours sur ceux qui ne le sont pas. En cas d'egalite, 
les priorites de CSS 2.1 sont les suivantes, de la plus importante a la moins importante : 

• Les styles de l'utilisateur employant la declaration [important, ce qui lui permet 
d'avoir le dernier mot. Cela semble normal, mais ce n'etait pas le cas avec CSS 1. 

• Les styles du concepteur (l'auteur) marque avec la declaration ! important. 

• Les styles du concepteur non declares ! important. 

• Les styles du visiteur non declares ! important. 

• Les styles par defaut du navigateur passe en dernier et ne peuvent done s'imposer a 
personne. 

Les exemples qui suivent vont illustrer ces regies. 

En ecrivant dans le meme fichier ou dans le meme element <styl e>, ou encore dans des 
fichiers differents, les styles suivants, nous obtenons des resultats divers selon les cas. 

hl{color: blue (important;} 
hlfcolor: red;} 

L'element <hl> a un contenu affiche en bleu car le style marque par la declaration ! i mportant 
l'emporte sur tous ceux n'ayant pas cette declaration. 

/*style de l'utilisateur */ 
hlfcolor: blue;} 
/*style de 1 'auteur */ 
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hl{color: red;) 

/*style du navigateur */ 

hlfcolor: black;} 

L' element <hl> a un contenu affiche en rouge car les styles du concepteur, non decla- 
res ! important, l'emportent sur ceux de l'utilisateur, egalement non declares ! important, 
et toujours sur ceux du navigateur. 

En revanche, avec les declarations de styles suivantes : 

/*style de l'utilisateur 
hl{color:blue limportant;} 
/* style du concepteur 
hl{col or: red limportant;} 

c'est le style de l'utilisateur qui l'emporte quand il entre en conflit avec un style de 
l'auteur egalement declare ! important, et l'element <hl> a done un contenu bleu. 



Selection par specif icite 

Pour les styles non encore departages par les conditions precedentes, on definit une spe- 
cificite pour chacun d'eux, a l'aide d'un nombre N de quatre chiffres, sous la forme abed, 
et chaque chiffre est calcule de la maniere suivante : 

• a=l si le style est defini localement dans un attribut styl e et a=0 sinon. Le nombre de la 
specificite vaut alors 1000 et les autres nombres ne sont pas calcules, le style l'empor- 
tant sur tous les autres (sauf un style utilisateur marque limportant). Quand a=0, les 
chiffres suivants b, c, d sont e values. 

• Le chiffre b represente le nombre de selecteur d'attributs id presents dans l'ensemble 
du selecteur. Pour le selecteur : 

div#gfonce {Definition des styles} 

nous avons b=2. 

Le chiffre c represente le nombre de classes, de pseudo-classes et de selecteurs 
d'attribut presents dans le selecteur. Pour le selecteur : 

div.for a:hover(} 

le chiffre c vaut 2 (une classe .force et une pseudo-classe :hover). 

• Le chiffre d represente le nombre d' elements XHTML utilises dans le selecteur. Pour 
le selecteur : 

div p a :be{} 

le chiffre d vaut 3 (trois elements : di v, p et a). 

Les exemples de calcul des specificites suivantes permettront de se familiariser avec ces 
regies, un peu complexes a assimiler d'emblee. 

<hl style="color: red;"> Texte </hl> 
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N=1000, ce style ne peut etre domine que par un style utilisateur declare ! important (y 
compris s'il est lui-meme declare de cette facon). 

div.hl#force{decl } 

N=0102 car le selecteur contient un identifiant ( #force) et deux elements XHTML (div 
et hi). 

hl.gras a. rouge (} 

N=0022 car le selecteur contient deux classes ( . gras et . rouge) et deux elements XHTML 
(hi et a). 

div#menu {background-color: #FC9;} 
N=0101 car le selecteur contient un selecteur d'identifiant ( #menu) et un element (di v). 

Selection selon I'ordre d'apparition 

Dans le cas ou, malgre tous les criteres precedents, deux styles sont encore en conflit, 
I'ordre d'apparition les departage, le dernier apparu dans le code etant celui qui 
l'emporte. Ajoutons que les styles importes au moyen de l'element <1 ink /> sont reputes 
apparaitre avant ceux qui sont ecrits dans l'element <styl e>. De plus, si plusieurs fichiers 
de styles sont importes dans le meme en-tete <head>, les styles du dernier importe 
l'emportent en cas de conflit. Par exemple, les cas suivants peuvent se produire : 

• Cas 1 : 

hi, h2 {color: yellow;} 
hi {color: navy;} 

Dans ce cas, le titre <hl> a un texte de couleur navy car ce style apparait en dernier et 
ecrase le precedent. 

• Cas 2: 

Style ecrit dans un fichier externe : 

/*Style ecrit dans le fichier externe « monstyle.css » 
hi {color: navy;} 

Styles lies et styles internes : 

Dans 1 'en-tete <head> 

<link rel ="styl esheet" type="text/css" href="monstyle.css" /> 
<style type="text/css"> 
hi {color: red;} 
</style> 

ou encore : 

<style type="text/css"> 
©import url (monstyle.css) 
hi {color: red;} 
</style> 
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Le titre <hl> a un texte de couleur red car les styles lies apparaissent avant ceux qui 
sont ecrits dans l'element <styl e>, meme si l'element <1 i nk /> est ecrit apres l'element 
<style> dans l'en-tete. 

L'heritage 

L'heritage est le fait qu'un element enfant possede les memes styles que l'element qui le 
contient (son parent dans la hierarchie des elements d'une page). Nous pouvons par 
exemple definir les styles suivants : 

divfcolor: white; background-color: blue;} 

Si dans le code XHTML de la page figurent les elements suivants : 

<div>Texte<p>Premier paragraphe <span cl ass="">XHTML</span> et les styles 
I <strong>CSS 2.1 </strong>sont indispensables </p> a tous !</div> 

L'element <p> est enfant de <div> et les elements <span> et <strong> sont eux-memes 
enfants de <p>. Par heritage et bien sur faute d'avoir dermis des styles propres pour les 
elements <p>, <span> et <strong>, ceux-ci ont un contenu qui possede les styles definis 
pour leur parent direct ou indirect <di v>. lis sont done tous en blanc sur fond bleu. Si nous 
creons un style different pour l'element <p>, ses elements enfants heritent alors de ces 
styles et non plus de ceux de l'element <di v>. 

De meme, si nous definissons un style pour les elements de listes ordonnees ou non <ol > 
et <ul>, tous les items de la liste, quel que soit leur niveau d'imbrication, ont les memes 
caracteristiques par defaut sans qu'il faille creer un style propre pour eux. 

L'heritage concerne un grand nombre de proprietes CSS que nous allons aborder dans les 
chapitres suivants, mais toutes les proprietes ne sont pas systematiquement heritees, par 
exemple les marges, les bordures, ou les dimensions et la position pour des raisons evi- 
dentes de mise en page. Depuis CSS 2, la quasi-totalite des proprietes peut prendre la 
valeur inherit permettant de definir explicitement l'heritage de la valeur que possede la 
meme propriete dans l'element parent. Toute modification operee pour l'element parent 
est done repercutee a ses enfants. Comme trop de precision ne nuit pas, et qu'il est prefe- 
rable de ne pas laisser l'initiative d' interpretation aux navigateurs, nous conseillons en 
cas de doute de definir clairement la propriete voulue pour un element plutot que de 
compter sur la realisation ou non de l'heritage. 

Les unites 

Toutes les proprietes CSS peuvent prendre une valeur dans un domaine particulier propre 
a chacune d'elle. En dehors des nombreux mots-cles existants, nous allons faire ici 
l'inventaire des differents types de valeurs parmi les plus generates que Ton retrouve 
pour un grand nombre de proprietes. 



Introduction a CSS 



Chapitre 9 



Les unites de longueur 

Elles s'appliquent aussi bien a la taille d'une police qu'a la largeur d'une bordure ou la 
hauteur d'un element. 

Elles s'expriment par un nombre entier ou decimal selon les cas, suivi d'une unite. 
On denombre les unites suivantes : 

• Les unites relatives 

- em : qui se refere a la taille de la police utilisee ou a la valeur de la propriete font- 
size (voir le chapitre 12) 

- ex : qui correspond a la taille de la lettre « x » minuscule dans la police utilisee. 

- px : qui correspond a la taille de 1 pixel. Contrairement a une idee repandue, la taille 
de 1 pixel n'est pas une taille absolue car elle depend du media de visualisation et 
de la distance entre l'oeil et le media. 

• Les unites absolues : elles sont recommandees quand les caracteristiques physiques 
(mesurables) du media sont connues. 

- in : soit un pouce anglais (un inch), done 25,4 mm ; 

- cm : le centimetre ; 

- mm : le millimetre ; 

- pt : le point qui represente conventionnellement 1/72 de pouce ; 

- pc : le pica qui represente 12 points, soit 1/6 de pouce. 

• Les pourcentages qui, comme chacun le sait, ne sont pas des unites mais une conven- 
tion decriture, le symbole % representant la fraction 1/100. Leur utilisation fait toujours 
reference a une autre dimension, celle de 1' element parent le plus souvent, ce qui permet 
de calculer la dimension voulue. 



Les couleurs 

Une valeur de couleur s'exprime en mettant en ceuvre l'une des trois manieres suivantes : 

• Un mot-cle parmi une liste limitative donnee a 1' annexe C. Tous les mots-cles sont en 
anglais, par exemple bl ack, yel 1 ow qui correspondent a des couleurs connues ; d'autres 
sont plus fantaisistes comme whitesmoke. 

• Un code hexadecimal de couleur base sur les composantes RGB d'une couleur dans le 
systeme additif. Chaque composante prend une valeur qui va de a FF, et 1' ensemble 
doit etre precede du caractere diese (#), par exemple #F4C5A8. II est possible de ne pre- 
ciser que trois nombres hexadecimaux de a F, par exemple #FC5, les navigateurs 
convertissant ces valeurs par replications (la couleur notee #FC5 est interpreted comme 
#FFCC55). 
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• A l'aide de la fonction rgb() qui admet trois parametres representant la valeur des 
composantes RGB d'une couleur selon la syntaxe rgb(Red, Green, Bl ue), chaque com- 
posante est exprimee par un nombre entier variant de a 255 ou par un pourcentage de 
a 100 %. On peut definir par exemple des couleurs de la facon suivante : 

rgb(45, 78, 2ou encore rgb(25%, 85%, 12%). 



Exercices 

Exercice 1 : Ecrivez la syntaxe generale de la declaration d'un style. 

Exercice 2 : Ecrivez le selecteur et le style donnant une couleur rouge et un fond noir 
aux elements <hl> et <h3>. 

Exercice 3 : Ecrivez le selecteur afin que tous les elements de la page soient ecrits en 
vert. 

Exercice 4 : Ecrivez une classe qui definit un fond jaune et appliquez-la aux elements 
<hl> et <p>. 

Exercice 5 : Ecrivez une classe specifique a un element <code> arm que son texte soit 
bleu. 

Exercice 6 : Ecrivez les classes correspondant aux styles « fondgris », « textevert » et 
« textejaune ». Appliquez la premiere et la troisieme a un paragraphe, puis la premiere et 
la deuxieme a une division <di v>. 

Exercice 7 : Ecrivez le selecteur arm que l'element dont l'attribut i d vaut « menu » ait un 
fond rouge. 

Exercice 8 : Ecrivez le selecteur afin que tous les elements ayant un attribut id aient un 
texte noir sur fond jaune. 

Exercice 9 : Ecrivez le selecteur afin que les elements <hl> ayant un attribut title aient 
un texte bleu, les autres ayant un texte noir. 

Exercice 10 : Ecrivez les selecteurs afin que les paragraphes inclus dans <body> aient un 
texte gris et que ceux inclus dans <di v> aient un texte marron. 

Exercice 11 : Ecrivez le selecteur afin que seuls les elements <span> enfants de <p> 
aient un texte bleu, tous les autres ayant un texte noir. 

Exercice 12 : Pour une liste imbriquee sur deux niveaux, ecrivez le selecteur pour que 
les elements <1 i > de premier niveau inclus dans <ol > soient rouges, et que ceux de second 
niveau soient en vert. 

Exercice 13 : Ecrivez le selecteur pour appliquer un style different a un element <li> 
selon qu'il est inclus dans <ol > ou <ul >. 

Exercice 14 : Ecrivez le selecteur pour que le survol d'un element <hl> provoque le 
changement de couleur du texte en rouge. 
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Exercice 15 : Ecrivez le selecteur afin que seule la premiere ligne d'un paragraphe soit 
en rouge, le reste s'affichant en gris. 

Exercice 16 : Oil peut-on ecrire des styles CSS ? 

Exercice 17 : Ecrivez des styles dans un fichier externe et les incorporer dans l'element 
<style>. 

Exercice 18 : Comment un utilisateur peut-il s' assurer que ses styles personnels sont 
bien appliques ? 

Exercice 19 : En reprenant les exercices precedents, definissez les couleurs en utilisant 
la fonction rgb( ). 

Exercice 20 : Testez les differents styles des exercices precedents dans le validateur du 
W3C, en les ecrivant dans l'element <styl e> ou dans un fichier externe. 
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Couleurs et image de fond 



Dans les anciennes versions de HTML, les definitions des couleurs de polices faisaient 
appel a une multiplication d'elements <font>, et a leur attribut color, appliques locale- 
ment. II en etait de meme pour les couleurs de fond des elements qui ne pouvaient etre 
definis que pour un nombre restreint d'elements. Ces elements et attributs ont heureuse- 
ment disparu des recommandations XHTML, au profit de definitions centralisees dans 
une feuille de style CSS. Chaque element peut egalement se voir attribuer une couleur ou une 
image de fond. 

Nous allons envisager ici la maniere de definir la couleur d'avant-plan du contenu d'un 
element, c'est-a-dire essentiellement celle du texte qui y est inclus. Nous verrons ensuite 
comment attribuer les couleurs et images de fond, ainsi que le positionnement de ces 
derniers. Lensemble de ces definitions permet la creation d'effets attractifs. 



La couleur d'avant-plan 

Nous ne sommes plus au temps des ecrans monochromes ni meme de ceux qui affichent 
seize couleurs. Aujourd'hui, meme les telephones portables ont des capacites superieures. 
L'emploi de la couleur dans un site est done aujourd'hui indispensable. Comme toute 
nouvelle technologie, l'apparition des ecrans couleur a entraine des abus d'usage. Selon 
la nature du site que vous allez construire, il faudra agir avec circonspection dans le choix 
et le nombre de couleurs employees. La multiplication des couleurs ne cree plus neces- 
sairement un effet positif sur le visiteur et une certaine harmonie doit aussi etre recher- 
chee. C'est la l'affaire du designer, le creatif qui saura choisir et associer les teintes. 
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Mais on vous demandera peut-etre de remplir a la fois cette fonction en plus de celle de 
programmeur XHTML. Pour vous aider dans le choix et 1' association des couleurs en 
fonction de l'effet desire, vous pouvez consulter les sites mentionnes dans l'annexe E. 
lis vous aideront par exemple a choisir une couleur de fond selon celle du texte pour 
obtenir differents effets de contraste. 

Comme nous l'avons indique, la couleur d'avant-plan est avant tout celle du texte, a 
laquelle on pense immediatement quand on parle de couleur, mais quand elle est definie, 
elle est aussi par defaut celle des bordures de l'element auquel elle s'applique. II ne fau- 
dra pas oublier cet etat de fait lors de la definition des bordures arm de leur affecter expli- 
citement une autre couleur (voir la propriete border-color). La couleur d'avant-plan est 
definie par la propriete col or selon la syntaxe suivante : 

selecteur {color:<couleur> | inherit} 

Si elle n'est pas definie explicitement, sa valeur peut dependre du navigateur utilise, 
mais il s'agit generalement du noir. Nous pouvons definir explicitement une couleur en 
utilisant les methodes vues au chapitre 9 a savoir un nom de couleur (par exemple : 
black), une valeur hexadecimale a trois ou six positions representant les composantes 
RGB de la couleur precedee du caractere (#) (par exemple : #F3C ou #FA3258), et enfin a 
l'aide de la fonction rgb( ) qui doit avoir trois parametres entiers variants de a 255, 
representant egalement les composantes RGB en notation decimale (par exemple : 
rgb(56 ,250,20)). 

L' exemple 10-1 permet de mettre en oeuvre les couleurs d'avant-plan et la maniere dont 
elles sont heritees. Nous y definissons la propriete col or pour l'element <body> (repere ©). 
< d i v > (repere ©), <i> et <acronym> (repere ©), et enfin <span> (repere ©). Pour l'ele- 
ment <div>, nous definissons egalement une bordure pour montrer que la couleur 
d'avant-plan s'y applique. Nous reviendrons en detail sur la creation des bordures au 
chapitre 11. 

Dans le corps du document figure un titre <hl> (repere 0) qui n'a pas de style propre. 
II herite done de la couleur definie pour <body>. Vient ensuite une division <di v> dont la 
couleur d'avant-plan est noire (repere ©). Le titre <h2> qu'elle contient figure done 
egalement en noir, de meme que le texte qui suit. L'element <p> (repere ©) sans style 
propre et egalement inclus dans <div> a aussi un texte noir. En revanche, les elements 
<acronym> (repere ©) et <i > (repere ©), tous deux enfants de ce paragraphe, ont un style 
propre, et leur contenu est affiche en rouge. De meme, l'element <span> enfant de ce 
meme paragraphe, mais ayant egalement un style propre, affiche son contenu en bleu. 
II inclut a son tour deux elements <big> et <i>. L'element <big> (repere ©) herite de la 
couleur de <span> qui est son parent direct et son texte est done en bleu. En revanche, 
l'element <i> (repere ©) est aussi enfant de <span> mais il a un style propre (repere ©) 
et son texte est done en rouge. Le texte place dans la fin de la division (repere ©) est 
affiche en noir en tant que contenu direct de <div>. Remarquons que sa bordure a la 
meme couleur que le texte. Vient ensuite un paragraphe independant (repere ©) sans 
style propre qui herite done de la couleur d'avant-plan de son parent direct qui est 
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<body>. Comme il inclut des elements <acronym> et <i> pour lequel la propriete color a 
la valeur red, le contenu de ces derniers est affiche en rouge comme les elements inclus 
dans <div>. 

Exemple 10-1. Les couleurs d'avant-plan 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Couleur d'avant plan</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" > 
body{color:#AA5;}© 

div {col or: #000;© border-width :3px; border-style: sol id; } 

i ,acronym{color:red;}@ 

spanfcolor: blue;)© 
</style> 
</head> 
<body> 

<hl>In principio creavit Deus caelum et terram terra autem erat inanis</hl>© 
<div>© 

< h 2 > I c i commence un &1 1 ; di v&gt ; </h2>© In principio creavit Deus caelum 

et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi 
et spiritus Dei ferebatur super aquas. 

<p> © Un paragraphe dans div. Pour <acronym>XHTML </acronym>©, le respect 
des recommandations du <i>W3C </i>© s'impose a tous les webmestres comme 
une necessite. .. In principio creavit Deus caelum et terram. <br /> 
<span> © In principio creavit <big>Deus</big>© caelum et <i>terram</i>© 

terra autem erat inanis </span>et vacua et tenebrae super faciem abyssi et 
^» spiritus Dei ferebatur super aquas 

</p> 

Texte de div : In principio creavit Deus caelum et terram terra autem erat 
inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas dixitque© 
</div> 

<p> © Un paragraphe independant. Pour <acronym>XHTML</acronym>©, le respect 
des recommandations du <i>W3C </i>© s'impose a tous les webmestres comme une 
necessite. . . </p> 
</body> 
</html> 
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La figure 10-1 montre le resultat obtenu pour les differentes couleurs d'avant-plan (ici en 
niveaux de gris). 



Figure 10-1 
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creavit Deus caelum et terrain terra autem erat inanis et vacua et tenebrae super faciem 
abyssi et spiritus Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem 
quod esset bona et divisit lucem ac tenebras appellavitque lucem diem et tenebras noctem factumque 
est vespere et mane dies unus dixit quo que Deus fiat tirmamentum in medio aquanun et dividat aquas 
ab aquis et fecit Deus tirmamentum dhisitque aquas quae erant sub firmamento ab his quae erant 
super tirmamentum et factum est ita vocavitque Deus firmamentum caelum et factum est vespere et 
mane dies secundus dixit vero Deus congregentur aquae quae sub caelo sunt in locum unum et 
appareat arida factumque est ita 
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La couleur de fond 

La couleur de fond d'un element est definie par la propriete background-color que nous 
pouvons appliquer a tous les elements XHTML. Sa syntaxe est la suivante : 

background-color:<couleur> | transparent | inherit 

Par defaut, 1' arriere-plan est transparent et laisse done apparaitre la couleur de fond de 
l'element parent. La transparence peut aussi etre definie explicitement avec la valeur 
transparent. Les valeurs du parametre <couleur> sont celles qui ont ete definies au 
chapitre precedent et pour la propriete color (mot-cle, code RGB ou fonction rgbO). 
La couleur de fond n'est pas heritee par defaut et il faut utiliser la valeur inherit pour 
obtenir l'heritage de cette couleur. Lexemple 10-2 montre l'application de couleurs 
de fond a differents elements. La couleur yellow est appliquee au corps du document 
<body> (repere ©)• Nous pouvons remarquer dans la figure 10-2 que la couleur de 
fond de l'element <hl> (repere ©). n'etant pas definie explicitement, elle est celle 
de son element parent <body> (repere 0), non pas par heritage, mais parce que son 
fond est transparent. 
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Pour la meme raison, la definition de la couleur de fond pour l'element <di v> (repere ©) 
s'applique a l'element <h2>, qui y est inclus (repere 0). En revanche, le paragraphe <p> 
(repere ©) a une couleur de fond bien definie (repere ©). II a done sa couleur propre et 
non pas celle de l'element parent <di v>. 

Cette couleur est la meme pour l'element <acronym> (repere ©) pour la meme raison que 
pour les elements <hl> et <h2> a la difference pres que la couleur de fond est ici definie 
avec la valeur transparent (repere 0). Enfin, l'element <i> (repere ©) ayant un style de 
fond defini avec le mot-cle orange (repere 0) son contenu est affiche sur un fond orange. 
L' association des proprietes color et background-color dans la meme classe (repere 0) 
permet d'obtenir des effets particuliers susceptibles d'attirer 1' attention sur un titre 
(repere ©). 

Exemple 10-2. Application des couleurs de fond 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :1 ang="fr"> 
<head> 

<title> Les couleurs de fond </title> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css" title=""> 

body {background-col or: yellow;}0 

div(background-color:#OO88FF;}0 

p {background- col or :rgb( 255,0,0) ; }0 

i {background- col or: orange; }0 

h2{ background-col or transparent}© 

.invert {col or: white; background -col or: #000;}© 
</style> 
</head> 
<body> 

<hl>XHTML 1.1 & CSS 2.1</hl>© 
<div>@ <h2>XHTML l.K/h2>© 

<p>©Pour <acronym>XHTML</acronym>©, le respect des recommandations du <i>W3C 
</i>© s'impose a tous les webmestres comme une necessite. . .</p><br /> 
</div><hr /> 

<h2 class="invert">CSS 2.1 : feuilles de style en cascade</h2>© 
</body> 
</html> 

La figure 10-2 presente le resultat obtenu. 
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Les images de fond 

Bien plus qu'une couleur de fond uniforme, la definition d'une image de fond pour la 
page entiere, ou pour certains de ses composants seulement, est de nature a attirer 1' atten- 
tion du visiteur. II est cependant conseille, comme pour toutes les possibilites decorati- 
ves, de ne pas en abuser en multipliant differentes images de fond dans la meme page. 
Cette restriction devra etre appreciee en fonction de la nature du site et du public vise, 
portail d'entre prise generalement plus sobre, ou site a caractere ludique plus exuberant. 



Definir une image de fond 

Pour definir une image de fond, nous utilisons la propriete background-image dont la syntaxe 
est la suivante : 

background-image:url (<URL>) | none | inherit 

La valeur <URL> passee a la fonction url ( ) doit contenir l'adresse relative ou absolue de 
l'image de fond. Auparavant, l'image choisie doit eventuellement etre redimensionnee a 
l'aide d'un logiciel graphique car il n'est pas possible d'intervenir sur les dimensions de 
l'image a l'aide des proprietes CSS. Dans tous les cas, l'image n'occupera que l'espace 
disponible de l'element quelle que soit sa taille, sans risque de debordement. La valeur 
none definit 1' absence d' image de fond et inherit permet de forcer 1' heritage de l'image 
de fond de l'element parent. En effet, les images de fond ne se transmettent pas aux ele- 
ments enfants. En pratique, on peut avoir l'impression contraire car un element enfant, 
pour lequel aucune des proprietes background-image ou background-color n'est definie, 
possede l'image de fond de son parent, car son propre fond est alors transparent. 
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En revanche, la definition d'une couleur de fond pour un element, l'emporte sur l'image 
de fond de son parent. De plus, si nous definissons ces deux proprietes pour le meme ele- 
ment, c'est l'image de fond qui l'emporte sur la couleur. II est d'ailleurs prudent de defi- 
nir les deux avec une couleur de fond proche de celle de l'image, car s'il Ton ne trouve 
pas l'image sur le serveur, c'est la couleur qui sert de fond. Enfin, signalons que, par 
defaut, l'image de fond est repetee horizontalement et verticalement pour occuper toute 
la surface de 1' element concerne. 

L'exemple 10-3 illustre notre propos en definissant des images de fond pour les elements 
<body> (repere ©). <hl> (repere ©), <div> (repere ©), <i> (repere 0) et une classe nom- 
inee heri t (repere ©) qui est appliquee au second element <h2> (repere ©). Dans le corps 
du document, l'image de fond de chacun de ces elements se superpose a celle de son 
parent. Pour l'element <p> (repere ©) qui n'a pas d'image de fond, la couleur de fond 
l'emporte egalement sur l'image de fond de son parent <div> (repere ©). L'element <i> 
(repere ©), enfant du paragraphe, possede a la fois une couleur de fond et une image de 
fond, done celle-ci l'emporte a la fois sur sa couleur de fond et sur la couleur de fond de 
son parent. 

Exemple 10-3. Les images de fond 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<title> Les images de fond </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css" > 

body {background- image: url (fondbl eu.gif ) ; background- col or:bl ue; }© 

p{ background-col or :yel 1 ow; }© 

hi {background- image: url Cfond2 .gif ) ; }© 

di v{ background -image: url (fondl .gi f ) ; }© 

i {background-col or: orange; background- image: url (fondjaune.gif) ; }© 

. heri t{ color: red; background- image : inherit ; }© 
</style> 
</head> 
<body> 

<hl>XHTML 1.1 & CSS 2.1</hl> 
<div>© <h2>XHTML l.K/h2> 
<p>©Pour <acronym>XHTML</acronym>, le respect des recommandations du <i>W3C 
</i>© s'impose a tous les webmestres comme une necessite. . .</p><br /> 
</d1v><hr /> 

<h2 class="herit">CSS 2.1 :<br /> feuilles de style en cascade</h2>© 
</body> 
</html> 
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Sur la figure 10-3 qui montre la visualisation du document dans Mozilla, nous pou- 
vons constater les effets obtenus par les definitions de ces differentes images et 
couleurs de fond. En etant attentif, on peut remarquer que l'image de fond du second 
element <h2> contenant le texte « CSS 2.1 », tout en etant la meme que celle de la 
page, est decalee par rapport a celle de <body>. Ce phenomene ne se produit pas dans 
Internet Explorer qui effectue un rendu du fond herite comme si celui-ci avait ete 
declare transparent. 
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Positionner une image de fond 

Par defaut, l'image de fond est repetee horizontalement et verticalement, et occupe tout 
l'espace disponible de l'element. Pour modifier cette caracteristique, nous pouvons limi- 
ter le type de repetition a l'aide de la propriete background-repeat dont la syntaxe est la 
suivante : 

background-repeat: repeat | repeat-x| repeat-y | no- repeat [inherit 
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Quand on lui attribue la valeur repeat, qui est la valeur par defaut, l'image est repetee 
selon les axes x et y et occupe toute la boite de 1' element telle qu'elle a ete definie au 
chapitre 9. Avec la valeur repeat-x, l'image n'est repetee que horizontalement en haut de 
l'element, avec la valeur repeat-y, elle n'est repetee que verticalement sur le cote gauche 
de l'element. La valeur no-repeat empeche quant a elle toute repetition. Dans ce cas, et si 
d'autres proprietes ne donnent pas de directives contraires, l'image est placee en haut et 
a gauche de l'espace occupe par l'element. La valeur inherit permet de forcer l'applica- 
tion de la valeur definie pour l'element parent car la propriete background-repeat n'est pas 
heritee par defaut. 

Dans l'exemple 10-4, nous definissons une couleur, une image de fond et la repetition de 
l'image selon l'axe des abscisses, pour les elements <body> et <h2> (reperes © et ©)• 
L'image de fond de <body> apparait done en haut de la page comme s'il s'agissait de celle 
de <hl> (repere ©) qui n'en est pas muni. Les deux elements <h2> (reperes © et 0) pre- 
sents dans la page ayant a la fois une couleur et une image de fond avec une repetition 
horizontale, l'image s'affiche en haut du titre et la couleur de fond occupe le reste de 
l'espace alloue aux titres. 

Exemple 10-4. Repetition de l'image de fond 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Positionnement des images de fond</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" > 
body {col or: bl ack; background- col or :#FFF; background- image: url (fondbl eu2.gif) ; 

background-repeat: repeat-x; }© 
h2 {background- col or :yel 1 ow; background -image: url (fondjaune.gif) ; 
background-repeat: repeat-x; }© 
</style> 
</head> 
<body> 

<hl>XHTML 1.1 et CSS 2.1</hl>© 

<h2>XHTML 1.1 <br />Le langage de creation de pages web</h2>© 

<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas </p> 
<h2>CSS 2.1<br />L ' outi 1 de creation des styles</h2>© 

<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas </p> 
</body> 
</html> 

La figure 10-4 montre 1' aspect obtenu par ces definitions. 
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In principio creavrt Dens caelum et terrain terra autem erat inanis et vacua et 
tenebrae super faciem abvssi et spiritus Dei terebatur super aquas dkitque Deus 
fiat lux et facta est lux et vidit Deus lucem quod esset bona et dhisit lucem ac 
tenebras appellavitque hicem diem et tenebras noctem factum que est vesper e et 
mane dies unus dbdt quoque Deus fiat finnameiiuim in medio aquarum et dhidat 
aquas ab aquis et fecit Deus finnatnentutn dhiskque aquas quae erant sub 
firmaniento ab his quae erant super finnamentum et factum est ita voc antique 
Deus finnamentum caelum et factum est vespere et mane dies secundus dixit 
vero Deus congregentur aquae quae sub caelo sunt in locum unum et appareat 
arida factumqtie est ita 




CSS 2.1 




L'outil de creation des styles 




In principio cieavit Deus caelum et terrain terra autem erat inanis et vacua et 
tenebrae super faciem abyssi et spiritus Dei terebatur super aquas dkitque Deus 
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En remplacant les styles de l'exemple 10-4 par les suivants : 

body (col or: black; background-col or :#FFF;backg round -i mage :url (fondbleu2.gif) ; 

background-repeat:repeat-y;} 
h2{ background -col or : yel 1 ow ;backg round- i mage : url (fondjaune.gif) ; 

background-repeat:repeat-y;} 

nous obtenons le resultat presente a la figure 10-5, qui prouve une fois de plus toute la 
puissance de CSS car, pour obtenir ces resultats tres differents l'un de l'autre, nous 
n'avons modifie que les deux valeurs de la propriete background-repeat (dans le cas pre- 
sent, un seul caractere a change dans chaque ligne). 

En utilisant la valeur no-repeat, l'image de fond sera placee dans Tangle superieur gau- 
che de la zone de contenu de l'element. Si cette position par defaut ne convient pas, il est 
possible d'en definir une autre explicitement a l'aide de la propriete background-position 
dont la syntaxe ci-apres offre de nombreuses possibilites : 

background-position: [[<pourcent> [ <long> | left | center | ri ght] [<pourcent> | 
<long> | top | center | bottom]?] | [left | center | right] || [top | center | 
| bottom]] | inherit 

Cette syntaxe, plutot complexe, merite quelques explications. La premiere partie : 
[<pourcent> | <long> [ left [ center | right] 
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Figure 10-5 
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In pricdpio credit Deus caelum et terrain terra autem erat iiianis et vacua et tenebrae 
super faciem abyssi et spiritus Dei ferebatur super aquas drdtque Deus fiat lux et facta est 
lux et \idit Deus lucem quod esset bona et dhisit hicem ac tenebras appeDa^itque hicem 
diein et tenebras noctetn factumque est vespere et mane dies uous dixit quo que Deus fiat 
Ermamentum in medio aquarutn et dKidat aquas at aquis et fecit Deus firnianientum 
dhisitque aquas quae erant sub finnatnento ab liis quae erant supei" finnanientura et 
factum est ita vocautque Deus firmameatuni caelum et factum est vespere et mane dies 
seeundus dixit vera Deus congregentur aquae quae sub caelo sunt in locum unum et 
appareat arida factumque est ita 
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signifie que la position horizontale peut etre definie au minimum par un pourcentage, une 
unite de longueur ou un des mots-cles left, center ou right dont nous allons donner la 
signification. La partie suivante : 

[<pourcent> | <long> | top | center | bottom] 

indique qu'il est possible, mais facultatif, de definir egalement la position verticale avec 
les memes unites et les mots-cles top, center et bottom. Si la position est fixee au moyen 
d'une unite de longueur, elle est calculee par rapport aux bords gauche et haut. Quand 
elle est donnee en pourcentage, celui-ci est calcule par rapport a la largeur de 1' element 
pour l'alignement horizontal et par rapport a sa hauteur pour l'alignement vertical. 

Si la position donnee en pixel ou en pourcentage, est faite avec une valeur negative, 
l'image de fond est coupee sur ses cotes gauche ou droit et haut ou bas selon le position- 
nement choisi. Elle n'apparait done que partiellement, ce qui peut entrainer des effets par- 
ticuliers. Associee a une boucle en JavaScript, cette possibility peut permettre de faire 
apparaitre l'image progressivement, a partir d'un bord de l'element auquel elle s'applique. 

La derniere partie de la syntaxe : 

[left | center | right] [| [top [ center | bottom] 

indique qu'il est aussi envisageable de n'utiliser que des mots-cles. Dans ce cas, nous 
avons le choix d'indiquer un seul mot-cle pour la position horizontale, ou deux, donnant 
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dans l'ordre la position horizontale suivie de la position verticale. Le tableau 10-1 indique 
la signification des differents mots-cles. 

Lapropriete background-position n'etant pas heritee, la valeur inherit permet d'appliquer 
la meme valeur que celle de 1' element parent. 



Tableau 10-1. Les mots-cles de positionnement des images de fond 



Position horizontale 


left 


Limage est placee a gauche dans la zone de contenu de I'element. 


center 


Limage est centree dans la zone de contenu de I'element. 


right 


Limage est placee a droite dans la zone de contenu de I'element. 


Position verticale 


top 


Limage est placee en haut de la zone de contenu de I'element. 


center 


Limage est centree verticalement dans la zone de contenu de I'element. 


bottom 


Limage est placee en bas de la zone de contenu de I'element. 



Comme l'indique la syntaxe, il est possible de definir un seul alignement (horizontal ou 
vertical) ; dans ce cas, l'autre est defini par defaut a la valeur center. II est plus clair de 
definir les deux a la fois, en donnant deux valeurs successives. 

Le tableau 10-2 donne 1' ensemble des neuf combinaisons possibles permettant d'utiliser 
deux mots-cles simultanement, et les equivalences en pourcentage, et avec l'usage d'un 
seul mot-cle. La derniere colonne de ce tableau donne les reperes des resultats obtenus 
pour chaque valeur, tels qu'ils sont visibles a la figure 10-6. Les valeurs left center, 0% 
S0%, 1 eft et 0% sont par exemple toutes equivalentes. 



Tableau 10-2. Equivalence des mots-cles 



2 mots-cles 


2 pourcentages 


1 seul mot-cle 


1 seul pourcentage 


Reperes de la figure 10-6 


left top 


% % 


non 




1 


center top 


50 % % 


top 




~~ 2 


right top 


100%0% 


non 




3 


left center 


% 50 % 


left 


0% 


4 


center center 


50 % 50 % 


center 


50% 


5 


right center 


100% 50% 


right 


100% 


6 


left bottom 


% 50 % 


non 




7 


center bottom 


50% 100% 


bottom 




8 


right bottom 


100% 100% 


non 




9 



Les codes de l'exemple 10-5 indiquent les definitions de styles de toutes les possibilites 
representees a la figure 10-6 en utilisant des mots-cles. Les reperes O 1 O correspondent 
a ceux de la figure 10-6. 

Exemple 10-5. Le positionnement des images de fond 

O body {background-i mage :url (pont.png) ; background- repeat: no- repeat ; 
I background-position:left top;} 
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t» 



o 




•» 

O 



•» 





body {background 
background-posi 
body {background 
background-posi 
body {background 
background-posi 
body {background 
background-posi 
body {background 
background-posi 
body {background 
background-posi 
body {background 
background-posi 
body {background 
background-posi 



-image:url (pont.png) 
tion:center top; ) 
-image:url (pont.png) 
tion:right top;} 
-image:url (pont.png) 
tion:left center;} 
-image:url (pont.png) 
tion:center center;} 
-image:url (pont.png) 
tion:right center;} 
-image:url (pont.png) 
ti on: left bottom;} 
-image:url (pont.png) 
tion:center bottom;} 
-image:url (pont.png) 
tion:right bottom;} 



; background- repeat: no- repeat; 
; background- repeat: no- repeat; 
; background- repeat: no- repeat; 
; background- repeat : no- repeat ; 
; background- repeat: no- repeat; 
; background- repeat: no- repeat; 
; background- repeat: no- repeat; 
; background- repeat : no- repeat ; 
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Pour certains elements, le plus evident etant <body>, quand le contenu est plus haut que la 
fenetre, des barres de defilement apparaissent automatiquement dans le navigateur. Si 
l'element possede une image de fond, celle-ci va par defaut defiler avec le reste de la 
page et elle peut done disparaitre, en particulier si elle est positionnee en haut ou meme 
au centre de la page. II est possible de choisir si Ton veut permettre ou non ce defilement 
en utilisant la propriete background-attachement dont la syntaxe est : 

background-attachement :scrol 1 | fixed | inherit 

Si la valeur scrol 1 correspond au comportement par defaut qui implique le defilement de 
l'image avec le contenu, la valeur fixed permet de conserver l'image a sa position ini- 
tiale, definie par background-position. Avec la valeur fixed nous pourrons par exemple 
conserver une image centree dans la fenetre quelle que soit la hauteur du contenu d'une 
page. La propriete n'etant pas heritee par defaut par un element enfant, la valeur inherit 
permet de definir cet heritage. 
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Figure 10-7 

Une image de fond fixe 



A titre d'exemple, en utilisant le meme code XHTML que celui de l'exemple 10-4 pour 
definir le contenu d'une page, et, en appliquant le style suivant a l'element <body> 
pour fixer l'image de fond, nous obtenons le resultat presente a la figure 10-7 apres avoir 



Les styles CSS 

Partie II 



fait defiler son contenu. Nous pouvons constater que 1' image de fond conserve sa position 
initiale malgre le defilement opere sur le texte de la page. 

body{background-image:url (paysage.png) ; background-repeat:no-repeat; 

^» background-positiomtop center; background-attachment: fixed; color:#BBB; } 

En revanche, en definissant les styles suivants qui autorisent le defilement de 1' image, 
nous obtenons le resultat presente a la figure 10-8. Nous y remarquons que le paysage de 
fond s'est deplace avec le texte auquel il est lie. 

body(background-image:url (paysage.png) ; background-repeatmo-repeat; 
background-positiomtop center; background-attachment:scrol 1 ; 
background-color:#BBB; color:white; } 
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Un raccourci pour les fonds 

Plutot que de definir individuellement chacune des caracteristiques precedentes de cou- 
leur, d'image, de position et de defilement pour le fond d'un element, il est possible de 
realiser ces memes definitions a l'aide d'une seule propriete nommee background qui va 
toutes les rassembler selon la syntaxe suivante : 

background:[<background-color>| | <background-image> | | <background-repeat> | | 
<background-attachement> | |<background-position>] | inherit 

Dans cette propriete, nous pouvons definir de une a cinq valeurs qui indiquent respective - 
ment pour le fond, sa couleur, l'image de fond, le mode de repetition de celle-ci, son defi- 
lement et sa position. L'ordre de definition de chaque valeur n'est pas important, mais 
chaque indication doit respecter la syntaxe donnee pour les differentes proprietes indivi- 
duelles que nous avons vues precedemment. A la place de 1' ensemble de ces valeurs, il 
est possible d'ecrire le mot-cle inherit pour que l'element ait toutes les caracteristiques 
de son parent. II est done possible de definir par exemple le style suivant : 

I body{background:url (paysage.png) no-repeat top center scroll #BBB ; } 

en lieu et place de 1' ensemble des proprietes individuelles : 

body {backg round- i mage :url (paysage.png) ; backg round- repeat: no- repeat ; 
background-position:top center; background-attachment:scrol 1 ; 
- background-color:#BBB;} 



Exercices 

Exercice 1 : Quels sont les differents effets de la definition de la propriete col or ? 

Exercice 2 : Creez les styles pour que les titres <hl> soient affiches en rouge sombre, les 
titres <h2> en bleu et les paragraphes en gris moyen. Pour definir les couleurs, utilisez 
successivement des mots-cles, des codes hexadecimaux et la fonction rgb(). Appliquez 
ces styles a un document. 

Exercice 3 : Creez les styles arm que le texte des paragraphes qui suivent un titre <hl> 
soit bleu et que celui des paragraphes qui suivent un titre <h2> soit vert. Appliquez ces 
styles a un document. 

Exercice 4 : Creez une page a fond jaune clair et dont le texte soit bleu fonce. 

Exercice 5 : Creez une page a fond bleu pale dont le texte par defaut soit noir. Les titres 
<hl> doivent etre ecrits en rouge sur fond jaune et les titres <h2> en bleu fonce sur fond 
transparent. 

Exercice 6 : Creez le style permettant d'afheher le contenu des elements <code> en vert 
vif sur fond noir, a l'image des antiques terminaux monochromes. 

Exercice 7 : Creez les styles de facon a ce que seuls les paragraphes ayant un attribut i d 
soient affiches avec un texte gris sur fond rose pale. Les autres paragraphes doivent etre 
affiches en noir sur blanc. 
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Exercice 8 : Definissez une image de fond de petit format qui soit repetee horizontale- 
ment et verticalement dans toute la page. Tous les autres elements de la page, quels qu'ils 
soient, doivent avoir un fond blanc. 

Exercice 9 : Creez une page dont 1' image de fond soit non repetee et situee au centre et 
en haut de la fenetre. 

Exercice 10 : Ecrivez un style de facon que n'apparaisse que la moitie inferieure de 
l'image de fond choisie. Celle-ci doit etre placee en haut et au centre de la page. 

Exercice 11 : Creez un style pour que l'image de fond (de petite taille de preference pour 
creer un motif) de tous les elements d'une page soit centree et repetee verticalement. 

Exercice 12 : Placez une image de fond dans une page a 15 % du bord gauche et a 30 % 
du bord superieur. 

Exercice 13 : Fixez l'image de fond de l'exemple precedent pour qu'elle ne defile pas. 
Qu'observe-t-on quand on redimensionne la fenetre du navigateur ? 

Exercice 14 : Ecrivez tous les styles des exercices precedents en utilisant la propriete 
raccourcie background quand cela est possible. 
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Creer des bordures, marges, 
espacements et contours 



CSS definit un espace dans la page pour chaque element de la hierarchie du document 
XHTML. C'est ce que Ton nomme communement le modele de boite de CSS. La boite 
associee a chaque element conditionne la surface, et eventuellement la position qu'il a 
dans la page, et done, la position des boites des autres elements par rapport a lui. Dans le 
modele de boite, chaque element visuel a un contenu direct ou indirect que nous pouvons 
dimensionner, mais il peut egalement avoir un espacement, une bordure et une marge par 
rapport aux boites des elements environnants. 

Le modele CSS des boites 

A chaque element XHTML visuel correspond dans le navigateur une zone rectangulaire 
nommee boite. Que l'element soit du type bloc comme <di v>, <p> ou <f orm>, ou de type en 
ligne comme <img />, il se voit done attribuer sa propre boite. II est important de savoir 
comment les navigateurs gerent ces boites les unes par rapport aux autres et comment est 
determine leur encombrement total a l'ecran. La figure 11-1 presente l'organisation du 
modele de boite de CSS 2. 
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Figure 11-1 

Le modele de boite 
CSS 2 



nun \±\i\ fmmrgc) 



ho it) i 1 



(bordure) 



padding { espacement) 



CONTENT DE L'ELEMENT 
XHTML 

height 

width 



En examinant cette figure, nous remarquons les points suivants : 

• La boite la plus interne est celle du contenu de l'element. II peut s'agir d'un texte dans 
un paragraphe, d'une image, ou d'elements de formulaires par exemple. Nous pou- 
vons agir sur les dimensions du contenu a l'aide des proprietes CSS width et height. 
Ces proprietes s'appliquent a tous les elements, sauf a ceux qui sont a la fois de type 
en ligne et non remplaces, ainsi qu'aux elements <col /> et <colgroup>. La propriete 
width definit la largeur de la boite du contenu et height sa hauteur. Ces dimensions 
peuvent etre donnees a l'aide d'une unite de longueur habituelle (em, ex, px, mm, cm, 
in, pc, pt) ou en pourcentage. Pour la propriete width, ce pourcentage sera calcule par 
rapport a la largeur de l'element parent de celui dont nous definissons la largeur. Si 
l'element est un bloc directement inclus dans <body>, il s'agit de la largeur de la fenetre 
du navigateur. Pour la propriete hei ght, il y a lieu de prendre quelques precautions car 
les dimensions precisees ne sont pas necessairement respectees dans le navigateur, en 
particulier dans les cas ou le contenu est plus haut que la hauteur specifiee. Nous 
reviendrons en detail sur les regies de dimensionnement des elements et la maniere 
dont elles sont gerees par CSS au chapitre 13. 

• Autour de la boite du contenu, un espacement {padding) peut etre defini. II permet de 
creer un espace vide entre le contenu et sa bordure. Si l'espacement est nul, ses limites 
exterieures sont confondues avec celles de la boite de contenu. L'espacement a toujours 
une couleur de fond identique a celle du contenu. 

• Encadrant la boite precedente, on trouve la bordure {border) de l'element qui cree une 
troisieme boite incluant les deux precedentes. La aussi, si la bordure a une largeur 
nulle, les cotes de la boite sont confondus avec ceux de l'espacement. La bordure peut 
etre dotee d'une couleur, d'un style, et bien sur d'une epaisseur. 

• Enfin, autour de la bordure une marge {margin) peut etre definie, laquelle cree un 
espace vide entre la boite precedente et les boites des elements voisins dans la page, et 
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done dans le code XHTML. Nous allons maintenant faire le tour de ces differents ele- 
ments de presentation. Pour determiner l'encombrement total d'un element dans le 
navigateur, il ne faudra pas perdre de vue que les dimensions de tous ces elements 
s'additionnent. Si, par exemple, nous definissons une largeur de 500 pixels pour un 
element, un espacement de 20 pixels, une bordure de 5 pixels et une marge de 15 
pixels, le rendu visuel de l'element aura une largeur totale de 15 + 5 + 20 + 500 + 20 
+ 5 + 15 = 580 pixels. Les anciennes versions de certains navigateurs tres connus pre- 
naient comme dimension totale celle qui avait ete definie avec la propriete width et 
reduisaient done d'autant le contenu pour placer marge, bordure et espacement. Les 
navigateurs modernes realisent bien 1' addition de toutes les valeurs et il ne faut done 
pas oublier d'en tenir compte pour eviter les debordements par rapport a la fenetre du 
navigateur, ce qui obligerait l'utilisateur a faire defiler la page en largeur, ce qui est 
desagreable et fait perdre du temps. 



Les bordures 

La creation de bordures autour d'un element permet d'obtenir des effets visuels qui atti- 
rent 1' attention et permettent egalement par exemple de mettre davantage en evidence la 
structure de la page. En CSS, nous pouvons attribuer a une bordure des caracteristiques 
variees, telles qu'un style, une largeur et une couleur. 



Le style de la bordure 

CSS offre de nombreuses possibilites de style pour les bordures grace a la propriete bor- 
der-style. Elle peut prendre un grand nombre de valeurs auxquelles sont attaches des 
effets visuels divers et varies propres a satisfaire les designers de site. Cette propriete 
s' applique a tous les elements visuels et sa syntaxe est la suivante : 

border-style : [none | hidden | <style>] {1,4} | inherit 

La valeur none indique qu'il n'y a pas de bordure. La valeur hidden donne le meme resul- 
tat pour la plupart des elements sauf les cellules de tableaux. Avec la valeur inherit, la 
bordure a explicitement le meme style que son element parent. Le parametre styl e peut 
prendre une des valeurs suivantes : 

• dotted : bordure en pointilles courts (figure 11-2, repere Q) \ 

• dashed : bordure en tirets longs (figure 1 1-2, repere ©) ; 

• solid: bordure pleine continue (figure 11-2, repere ©) ; 

• double : bordure constitute de deux traits paralleles continus (figure 11-2, repere ©)• 
Si la largeur de bordure est insuffisante, un seul trait apparait (pour definir la largeur, 
voir la propriete border-width) ; 

• groove : bordure en creux. Leffet de creux est cree par l'emploi de couleurs differentes 
pour les cotes (figure 11-2, repere 0) ; 
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• ridge : bordure en relief. Meme remarque sur la couleur des cotes (figure 11-2, 
repere ©) ; 

• inset : bordure en creux dont chaque cote n'a qu'une seule couleur (figure 11-2, 
repere ©) ; 

• outset : bordure en relief dont chaque cote n'a qu'une seule couleur (figure 11-2, 
repere ©). 

La notation {1,4} precise qu'il est possible d'etablir de 1 a 4 valeurs si Ton veut definir 
separement les styles des bordures haute, droite, basse et gauche, dans cet ordre (pour 
memoriser cet ordre, pensez au sens des aiguilles d'une montre en partant de midi). 
Cette multiplication des valeurs obeit aux regies suivantes : 

• En donnant une seule valeur, elle s'applique aux quatre cotes. 

• En donnant deux valeurs, la premiere s'applique aux cotes haut et bas, et la seconde 
aux cotes droit et gauche. 

• En donnant trois valeurs, la premiere s'applique au cote haut, la suivante aux cotes 
droit et gauche, et la derniere au bord bas. 

Si vous voulez eviter de memoriser toutes ces regies, il vaut mieux definir soit une seule, 
soit quatre valeurs explicitement, le code etant alors immediatement plus lisible. 

L'exemple 11-1 contient la definition de la couleur d'avant-plan qui est aussi celle des 
bordures (repere O)- Vient ensuite la definition de huit classes pour les elements <hl> 
(reperes © a ©) qui permet de visualiser tous les styles de bordures possibles. 

Exemple 11-1. Les styles de bordures 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtrnlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les styles de bordures</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" titl e="bordure"> 

body{color:#555;}© 

hi. dotted {border-style: dotted; }© 

hi. dashed {border-style: dashed; }© 

hl.solid{border-style: solid; border-width: thick;}© 

hl.double{border-style: double; border-width: thick;}© 

hl.groove{border-style: groove; border-width: thick;}© 

hl.ridgefborder-style: ridge; border-width: thick;}© 

hl.inset{border-style: inset; border-width: thick;}© 

hl.outset{border-style: outset; border-width: thick;}© 
</style> 
</head> 
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<body> 

<hl class="dotted">XHTML et CSS</hl>© 
<hl class="dashed">XHTML et CSS</hl>© 
<hl class="solid">XHTML et CSS</hl>© 
<hl class="double">XHTML et CSS</hl>© 
<hl class="groove">XHTML et CSS</hl>© 
<hl class="ridge">XHTML et CSS</hl>© 
<hl class="inset">XHTML et CSS</hl>© 
<hl class="outset">XHTML et CSS</hl>© 
</body> 
</html> 



Figure 11-2 
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Nous pouvons definir individuellement chacune des bordures d'un element en utilisant 
les proprietes suivantes : 

• border-top-style: definit le style de la bordure haute ; 

• border-right-style: definit le style de la bordure droite ; 

• border-bottom-style: definit le style de la bordure basse ; 

• border-1 eft-sty 1 e : definit le style de la bordure gauche. 

Dans l'exemple 11-2, nous definissons avec les proprietes susmentionnees quatre styles 
differents pour les bordures des titres <hl> (repere ©). Nous procedons de meme en 
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definissant deux styles differents pour les bordures gauche et droite des paragraphes <p> 
(repere ©). L' utilisation de la pseudo-classe : hover permet de modifier individuellement 
chacune de ces bordures quand le curseur survole la boite du paragraphe (repere ©). 

Exemple 11-2. Les bordures individuelles 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les bordures individuelles</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="bordures"> 
hl{border-top-style: dotted; border-right-style: dashed; 

border-bottom-style: double; border-left-style: solid;}© 
p{border-left-style: inset; border-right-style: dashed;}© 
p: hover{border-top-styl e: dotted ; border-bottom-style: double;}© 
</style> 
</head> 
<body> 
<hl>XHTML et CSS</hl> 

<p> In principio creavit Deus caelum et terram terra autem erat inanis 
et vacua . . .</p> 
</body> 
</html> 

La figure 11-3 illustre le resultat obtenu lors du survol du paragraphe. 
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La largeur de la bordure 

En donnant un style aux bordures, elles prennent une largeur fixe comme nous l'avons 
constate a la figure 11-2. Nous pouvons donner une largeur particuliere aux bordures 
d'un element grace a la propriete border-width, dont la syntaxe est la suivante : 

border-width: <bord>{l,4} [ inherit 

Le parametre <bord> peut etre defini de plusieurs facons : 

• Par un mot-cle, parmi les suivants : 

- thin : pour une bordure mince. Avec cette valeur, les effets de style larges comme 
doubl e risquent de ne pas etre nettement perceptibles. 

- medi urn : pour une bordure moyenne (c'est la valeur par defaut). 

- thick : pour une bordure epaisse. 

Ces valeurs ne correspondent pas a une epaisseur absolue et celle-ci peut varier selon les 
navigateurs. 

• Par une valeur explicite de longueur, definie habituellement par un nombre (positif) et 
une unite en px, em, ex, cm, mm, in, pc, pt. 

• Par le mot-cle i nheri t si Ton veut la meme valeur que celle de 1' element parent. 

Si une seule valeur est donnee, elle s' applique aux quatre cotes de la bordure. La defini- 
tion du parametre peut aussi contenir de une a quatre valeurs qui peuvent s'appliquer 
separement aux bordures haute, droite, basse et gauche dans cet ordre. Cette possibilite 
obeit aux memes regies d' ordre d' affectation, que nous avons indiquees pour la propriete 
border-styl e, quand on definit deux, trois ou quatre valeurs. 

Les meilleurs effets visuels sont souvent obtenus en ne definissant une bordure que sur 
un ou deux cotes de la boite de contenu. On precede a ces definitions a l'aide des proprietes 
suivantes : 

• border-top-width : pour la bordure haute ; 

• border- right-width : pour la bordure droite ; 

• border-bottom-width : pour la bordure basse ; 

• border-left-width : pour la bordure gauche. 

Leur syntaxe est la meme que celle de la propriete border-width mais ne doit bien sur 
comporter qu'une seule valeur. 

Lexemple 11-3 illustre les differentes possibilites de definition de la largeur des bordu- 
res. Le premier style definit la couleur d' avant-plan, et done egalement celle des bordures 
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(repere ©)• Pour l'element <div>, la largeur des bordures est fixee a la valeur double et 
des largeurs differentes sont creees pour les cotes haut, bas et gauche au moyen d'unites 
differentes (repere ©). Pour les paragraphes (repere ©), la largeur est definie a l'aide du 
mot-cle thick (repere ©) tandis que pour 1' element <span> (repere ©), qui est inclus dans 
<p> , la largeur est fixee a la valeur medi urn (repere 0). Pour cet element, le style des bor- 
dures est modifie dynamiquement a l'aide d'un code JavaScript et passe de i nset , quand 
le curseur survole le texte (repere ©), a outset, quand il le quitte (repere ©). Pour les 
titres <hl> (reperes © et ©), la largeur est definie en unites ex et le style utilise la pro- 
priete wi dth pour limiter la largeur de la boite associee a l'element a 50 % de celle de son 
parent <di v> (repere ©). 



Exemple 11-3. La largeur des bordures 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<title>Largeur des bordures</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" title="bordures"> 
body{color:#444;}© 

div{border-style: double; border-top-width: 20px ; border-bottom-width: 15px; 

border-left-width: 3em;}© 
pfborder-style: inset; border-width: thick; line-height: 1.5em;}© 
span{border-style: outset; border-width: medium;}© 

hl{border-style: ridge ; border-width: lex; text-align: center; width:50%;}@ 
</style> 
</head> 
<body> 
©<div> 
©<hl>XHTML</hl> 

©<p> In principio creavit ©<span ©onmouseover= "this. style. 

borderStyle=' inset' " © onmouseout=" t hi s.style.borderStyle=' outset' "> 
^» Deus </span> caelum et terram terra autem erat inanis et vacua et tenebrae 

super faciem abyssi et spiritus Dei ferebatur super aquas 
</p> 

©<hl>CSS 2.1</hl> 
</div> 
</body> 
</html> 
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Figure 11-4 
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La couleur de la bordure 

Ann d'ameliorer encore 1' aspect des bordures, nous pouvons definir une couleur pour 
chaque bordure d'element avec la propriete border-col or dont la syntaxe est la suivante : 

I border-color: [<couleur> | transparent] {1 ,4} ] inherit 

Le parametre <couleur> est donne par un code de couleur hexadecimal precede du sym- 
bole diese (#), un mot-cle (voir annexe C) ou les composantes RGB de la couleur don- 
nees comme parametres de la fonction rgb( ).Le mot-cle transparent indique que la bordure 
sera invisible et laissera voir la couleur du fond, ce qui peut constituer un effet particulier 
ou simplement creer une marge autour du contenu. Comme pour la propriete border- 
width, l'indication {1,4} precise qu'il est possible de definir individuellement la couleur 
des bordures des cotes haut, droit, bas et gauche avec les memes conditions d' attribution 
en tournant dans le sens des aiguilles d'une montre. II est a noter que si nous definissons 
une largeur de bordure avec la propriete border-width, mais pas sa couleur, le navigateur 
cree une bordure dont la couleur est celle de la propriete col or attribute au texte. Mais il 
est encore possible de definir individuellement la couleur de chaque cote de la bordure a 
l'aide des proprietes suivantes : 

• border-top-color : pour la couleur de la bordure haute ; 

• border-right-col or : pour la couleur de la bordure droite ; 

• border-bottom-col or : pour la couleur de la bordure basse ; 

• border-left-color : pour la couleur de la bordure gauche. 
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En modifiant les definitions des styles de l'exemple 11-3 afin d'obtenir pour les bordures 
des couleurs personnalisees et qui soient differentes de la couleur d'avant-plan definie 
pour l'element <body> (repere ©), nous obtenons le code de l'exemple 11-4. Les paragra- 
phes ont alors des bordures jaunes (repere ©). Pour l'element <di v>, la propriete border- 
col or est definie avec les valeurs red , bl ue et yel 1 ow, et nous obtenons done une bordure 
haute rouge, des bordures droite et gauche bleues et une bordure basse jaune (repere ©). 
L'element <span> a encore une bordure outset dont la couleur est maintenant bleue 
(repere 0). Quant aux titres <hl>, leur couleur de bordure est definie avec la fonction 
rgb( ) (rgb( 25 . 255 , 50)) en vert (repere 0). 

Exemple 11-4. La couleur des bordures 

<style type="text/css" title="bordures"> 
body{color:#444;}© 

p{border-style: inset; border-width: thick; line-height: 1.5em; border-color: 
yellow;}© 

div{border-style: double; border-top-width: 20px ; border-bottom-width: 15px; 

border-left-width: 3em; border-color: red blue yellow;)© 
span{border-style: outset; border-width: medium; border-color: #1533FF;}0 
hl(border-style: ridge; border-width: lex; text-align: center; width: 50%; 

border-color: rgb( 25 , 255 , 50 ) ; }© 
</style> 

Definition globale d'une bordure 

Pour definir les caracteristiques d'une bordure, plutot que d'utiliser comme precedem- 
ment trois proprietes CSS, nous pouvons utiliser la propriete border, dont la syntaxe est 
la suivante : 

border: [<1 argeur> | | <styl e> | | [<couleur> | transparent]] | inherit 

Elle s' applique egalement a tous les elements XHTML visuels mais elle ne permet pas de 
definir individuellement chaque cote de la bordure. Les definitions d'epaisseur, de style 
et de couleur prennent les memes valeurs que dans les proprietes border-width, border- 
style et border-color. L'utilisation de cette propriete raccourcie permet de gagner du 
temps pour les cas courants dans lesquels la bordure est uniforme sur tous ses cotes. Si 
nous ecrivons par exemple le style suivant : 

hHborder: 5px double blue;} 

cela equivaut aux trois definitions suivantes : 

hl{border-width: 5px border-style: double; border-color: blue;} 

II est encore possible d'afhner les definitions individuelles de chaque cote de la bordure 
d'un element en utilisant les proprietes suivantes dont la syntaxe est la meme que celle de 
la propriete border. Elles permettent de definir en une seule operation toutes les caracte- 
ristiques d'un cote de la bordure : 

• border -top : definit la bordure haute ; 
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• border-right: definit la bordure droite ; 

• border-bottom: definit la bordure basse ; 

• border-left: definit la bordure gauche. 

Ces proprietes raccourcies sont plus simples d'utilisation que les definitions separees des 
trois caracteristiques. Nous reserverons ces dernieres pour les cas ou nous voudrions 
creer des effets dynamiques en reponse a une action du visiteur afin de ne modifier 
qu'une seule des caracteristiques d'une bordure. 

L'exemple 11-5 illustre ce propos. Nous definissons tout d'abord globalement la bordure 
gauche des paragraphes (reperes Q et 0), puis les bordures haute et basse des divisions 
<di v> (repere ©). Les elements <hl> (reperes Q et ©) ont une bordure basse verte de 15 
pixels et de style inset (repere ©). La pseudo-classe :hover associee a cet element permet 
de modifier dynamiquement le style de sa bordure (repere ©)• Tous les navigateurs 
comme Explorer ne gerent pas cette pseudo-classe pour tous les elements. Pour obtenir le 
meme effet, il peut done etre preferable d'utiliser les attributs gestionnaires d'evene- 
ments onmouseover et onmouseout qui jouent le meme role, et ainsi effectuer le changement 
de style au moyen d'un code JavaScript. C'est ce qui est realise pour l'element <span> 
inclus dans le paragraphe. Nous definissons a l'origine une bordure basse de 3 pixels de 
style sol id. Le gestionnaire onmouseover permet de changer ce style en creant une bordure 
double quand le curseur survole son contenu, et d'annuler cet effet quand il la quitte 
(repere 0). 



Exemple 11-5. Definition individuelle des bordures 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Largeur des bordures</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" titl e="bordures i ndi vi duel 1 es " > 
p{border-left: 2em dotted blue;)© 

di v{border-bottom: lOpx double red; border-top: lOpx groove red;}0 

hKborder-bottom: 15px inset rgb( 25,255,50) ; text-align: center;}© 

hi : hover { border- bottom-sty 1 e: doubl e; }© 

spanfborder-bottom: solid red 3px;}© 
</style> 
</head> 
<body> 
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©<div> 
©<hl>XHTML</hl> 
©<p> In principio creavit 

©<span onmouseove r= " t hi s. style. bo rderBottomStyle=' double' " 

onmouseout="this.style.borderBottomStyle='sol id' "> 
caelum et terram terra autem erat inanis et vacua et tenebrae super faciem 
</p> 

©<hl>CSS 2.1</hl> 
</div> 
</body> 
</html> 

La figure 11-5 presente le resultat obtenu par la definition de ces bordures et la modification 
du style du premier titre <hl> en cas de survol. 
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Modification dynamique de bordure 

Les marges 

Afin d'aerer le contenu d'une page et en particulier l'espace entre le rendu d'un element 
et ses voisins dans la page, nous pouvons definir une marge autour de chaque element. 
Cette derniere est situee, d'apres le modele de boites CSS illustre a la figure 11-1, a 
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l'exterieur de la boite constitute par la bordure de l'element parent, qu'il s'agisse de 
<body> ou d'un autre bloc, et il n'est pas possible de la modifier directement sans recourir 
a quelque astuce. 

Pour definir la largeur des marges d'un element, nous disposons de la propriete margin, 
dont la syntaxe est la suivante : 

margin: <1 arge>{ 1,4} | inherit 

Le parametre 1 arge est un nombre entier suivi d'une unite (px, ex, em, %, mm, cm, in, pc, 
pt). Les marges peuvent etre negatives, et dans ce cas la boite d'un element sort de celle 
de son parent. 

Si la largeur de la marge est donnee en pourcentage, elle est calculee par rapport a celle 
du bloc parent. La notation {1,4} permet ici encore de definir de une a quatre marges dans 
le sens des aiguilles d'une montre (haut, droit, bas, gauche), et ce avec les memes condi- 
tions d'affectation si nous ne definissons qu'une, deux ou trois valeurs. La valeur inherit 
applique la marge de l'element parent. 

Comme dans les cas precedents de bordures, il est possible de definir individuellement 
chaque marge. Nous utiliserons les proprietes suivantes pour definir par exemple une 
seule marge (ce qui est aussi possible avec la propriete border en mettant les autres a 0), 
ou encore pour agir dynamiquement sur une seule des marges. 

• margin-top : definit la marge haute ; 

• margin-right : definit la marge droite ; 

• margin-bottom : definit la marge basse ; 

• margin-left : definit la marge haute. 

Les valeurs a donner a ces proprietes sont les memes que celles de border auxquelles 
s'ajoute la valeur auto pour laquelle seul le navigateur determine la valeur de la marge. 
Nous eviterons ce type de valeur qui laisse l'initiative aux navigateurs et risque ainsi de 
creer des effets divergents. II est preferable de definir explicitement une valeur pour creer 
un effet de presentation donne. 

Dans l'exemple 11-6, nous creons des marges pour les differents elements de la page. 
Les couleurs de fond qui leur sont attributes permettent de mieux visualiser ces dernie- 
res. Les titres <hl> ont des marges haute et basse de 40 pixels et des marges droite et 
gauche de 10 % de la largeur de leur element parent (repere ©). Pour le premier 
(repere ©), inclus dans <body>, les marges droite et gauche sont done de 10 % de la lar- 
geur de la fenetre du navigateur. Elles vont done evoluer si nous redimensionnons cette 
derniere. Pour l'element <di v> (repere 0), seule la marge gauche est definie a 5 % de la 
largeur de son parent (ici, il s'agit de <body>)(repere ©). En consequence, le deuxieme 
et le troisieme element <hl> (reperes et 0) qui sont inclus dans <di v> ont une marge 
gauche totale dans la page superieure a celle du premier car elle represente la somme 
des 5 % de marge de <di v> et des 10 % de marge de <hl>. La marge des paragraphes est 
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donnee par trois valeurs (repere ©) ; nous obtenons done une marge superieure de 
10 pixels, des marges droite et gauche negatives de - 1 em qui font deborder le contenu 
de l'element <p> (repere ©) a droite et a gauche de son parent <di v>, et une marge basse de 
15 pixels. 

Exemple 11-6. Creation des marges 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xm1ns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Largeur des bordures</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" title="bordures i ndi vi duel 1 es "> 
hljmargin: 40px 10%; background-color: yellow;}© 
div{margin-left: 5% ; background-color: #CCC;}@ 
pfmargin: lOpx -lem 15px; background-color: #EEE;)@ 
</style> 
</head> 
<body> 

0<hl>XHTML</hl> 
0<div> 
0<hl>XHTML</hl> 

©<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas </p> 
©<hl>CSS 2.1</hl> 
</div> 
</body> 
</html> 

La figure 11-6 presente le resultat obtenu. Nous pouvons y remarquer que l'espace entre 
le second titre <hl> et le paragraphe n'est pas la somme des marges de chacun d'eux 
comme on pouvait s'y attendre mais qu'elle vaut 40 pixels. En effet, les marges basse de 
<hl> et haute de <p> ont fusionne, et ce, de la maniere suivante : 

• Les marges hautes et basses de boites generees par des elements de type bl oc fusion- 
nent a condition d'etre dans un flux normal, e'est-a-dire de ne pas utiliser de 
propriete de positionnement (comme float ou position que nous aborderons au cha- 
pitre 13). Dans ce cas, la marge finale a la plus grande des deux valeurs des elements 
contigus. Si une des marges est negative, la marge resultante est la difference des 
deux marges. Si les deux marges sont negatives, celle qui a la plus grande valeur 
absolue l'emporte. 
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Les marges entre les boites flottantes (voir la propriete f 1 oat) ou celles qui sont posi- 
tionnees absolument ou relativement (voir la propriete position au chapitre 13) ne 
fusionnent j amais . 



Figure 11-6 
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In principio crear.it Beus caelum et terrain terra autem era! blank- et vacua et tenebrae super faetein abyssi et spiritus Dei 
ferebatur super aquas drdtque Deus fiat hut et facta est hut et ^idit Deus fucem quod esset bona ct dhisit hicem ac tentbras 
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Les espacements 

En nous referant une fois de plus au modele des boites illustre a la figure 11-1, nous pou- 
vons constater qu'il est possible de definir une zone situee entre la boite de contenu d'un 
element et sa bordure. Cette zone qui est nominee l'espacement (padding) permet 
comme la propriete margin d'aerer la presentation mais cette fois non pas entre deux ele- 
ments voisins mais directement autour du contenu, qu'il existe une bordure definie expli- 
citement ou pas. Contrairement a la marge, l'espacement a la meme couleur ou image de 
fond que le contenu de l'element qu'elle entoure, telles que ces dernieres sont definies 
par les proprietes background-color, background-image ou background. Cet espacement est 
cree par la propriete padding qui s'applique a tous les elements XHTML, excepte ceux 
qui sontinclus dans l'element <table> (<tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <colgroup>, 
<col />). La syntaxe de la propriete paddi ng est similaire a celle de margi n : 

padding: <large>{l,4} [ inherit 

Les valeurs du parametre large sont donnees par un a quatre nombres positifs qui defi- 
nissent dans l'ordre les espacements haut, droit, bas et gauche de l'element. Si nous 
definissons une seule valeur, elle s'applique ici encore a toutes les marges. Si nous en 
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definissons deux, la premiere s' applique aux espacements haut et bas et la deuxieme aux 
espacements droit et gauche. Si nous definissons trois valeurs, la premiere s' applique en 
haut, la deuxieme a droite et a gauche, et la troisieme en bas. II est souvent plus simple 
de donner quatre valeurs explicites, dont certaines nulles. 

Comme pour les proprietes de bordure ou de marge vues precedemment, il est encore 
possible de definir individuellement chacun des espacements d'un element au moyen des 
proprietes suivantes : 

• padding-top : definit l'espacement haut ; 

• padding-right : definit l'espacement droit ; 

• padding-bottom : definit l'espacement bas ; 

• padding-left : definit l'espacement gauche. 

Les valeurs possibles et les restrictions sont les memes que pour padding. 

Dans l'exemple 11-7, nous creons des espacements differents pour quatre paragraphes et 
des couleurs de fonds qui n'ont ici d' autre role que de bien materialiser les limites de la 
boite de chaque element. 

L'espacement du bloc <di v> parent de tous les paragraphes est de 20 pixels sur chacun de 
ses cotes (repere ©). L'espacement de chacun des trois premiers paragraphes (reperes ©, 
© et ©) est defini dans une classe particuliere, en pixels, en em et en pourcentage (reperes 
©, et ©). L'espacement du dernier paragraphe (repere ©) a la valeur inherit et va 
done heriter de la valeur definie pour son element parent <div> (repere 0), ici done de la 
valeur 20 pixels (l'heritage n'est pas realise dans Explorer, ce qui montre une fois de plus 
l'interet de la definition explicite de la valeur souhaitee, sans compter sur l'heritage). Les 
elements <hl> inclus directement dans le corps de la page (repere 0) n'ont qu'un espace- 
ment haut de 0,5 em (repere 0), alors que ceux qui sont inclus dans <di v> (repere ©) ont 
en plus un espacement gauche de 200 pixels (repere 0). 

Exemple 11-7. L'espacement du contenu des elements 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les marges</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="bordures i ndi vi duel 1 es "> 

divlpadding: 20px; background-color: #CCC;}© 

p.retraitltpadding: 20px; background-color: #EEE;)© 

p. retrait2{padding:2em; background-color: #EEE;}0 

p.retrait3{padding-left: 10%; background-color: #EEE;}© 

p.heritfpadding: inherit; background-color: #EEE;)0 

hl{ padding-top: 0.5em; background-color :yellow; border-style: dotted;}© 
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div hl{ padding-left: 200px;}© 
</style> 
</head> 
<body> 

©<hl>XHTML</hl> 
©<div> 

©<hl>XHTML</hl> 

©<p class="retraitl">In principio creavit Deus caelum et terrain terra autem erat 
i nam's . . .</p> 

©<p class="retrait2">In principio creavit Deus caelum et terram terra autem erat 
i nam's . . .</p> 

©<p class="retrait3">In principio creavit Deus caelum et terram terra autem erat 
i nam's . . .</p> 

©<p class="retrait herifMn principio creavit Deus caelum et terram terra autem 

erat inanis . . .</p> 
</div> 
</body> 
</html> 

La figure 11-7 illustre le resultat obtenu pour ces differents espacements. 
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Les contours 

Nous avons vu que les marges situees a l'exterieur des bordures sont transparentes. Dans 
cet espace exterieur aux bordures, il est possible de creer des contours qui ont une epais- 
seur, un style et une couleur. Ces contours vont avoir le meme aspect qu'une bordure, 
mais avec deux differences de comportement : 

• Les dimensions d'un contour ne sont pas prises en compte dans le modele de boite et 
ne peuvent done pas modifier les dimensions totales de la boite la plus externe. Les 
elements contigus a la boite generale pour un element ne se trouvent pas decales par 
l'existence d'un contour comme ils le sont par une marge. L' inconvenient de cet etat 
de fait est qu'un contour tres large peut se superposer aux elements voisins, et en 
cacher une partie. 

• Les contours ne ferment pas une boite rectangulaire et ils peuvent s'etendre sur deux 
lignes (voir la figure 11-8 pour l'element <span>). 

Les proprietes que nous allons utiliser pour creer des contours sont theoriquement appli- 
cables a tous les elements XHTML. Cependant, a ce jour, seul le navigateur Opera realise 
ces contours a peu pres correctement. Les autres navigateurs (Mozilla, Firefox, Net- 
scape) ne les affichent que dans certaines conditions voire pas de tout (Explorer 6). En 
pratique, les proprietes peuvent etre appliquees pour faire apparaitre dynamiquement un 
contour autour de certains elements, comme des images des boutons ou des zones de sai- 
sie de formulaire, en reponse aux attributs onf ocus ou onmouseover , geres par les pseudo- 
classes :focus et :hover, ou des scripts JavaScript. 

Le style du contour 

Le style du contour est la premiere des proprietes a definir pour obtenir un affichage, les 
autres ayants des valeurs par defaut. II est cree grace a la propriete outl i ne-styl e, dont la 
syntaxe est similaire a celle de border-styl e : 

outline-style: none | <style> | inherit 

La valeur none supprime tout contour et le parametre <styl e> peut prendre une des valeurs 
suivantes : 

• dotted : bordure en pointilles courts (figure 11-2, repere Q 1 ■ 

• dashed : bordure en tirets longs (figure 11-2, repere Q) ; 

• solid: bordure pleine continue (figure 1 1-2, repere Q ; 

• double : bordure constitute de deux traits paralleles continus (figure 11-2, repere ©). 
Si la largeur de bordure est insuffisante, un seul trait apparait (pour definir la largeur, 
voir la propriete border-width) ; 

• groove : bordure en creux. Les quatre cotes sont de couleur differente ce qui permet de 
creer cet effet de creux (figure 11-2, repere 0) ; 
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• ridge : bordure en relief. Meme remarque sur la couleur des cotes (figure 11-2, 
repere ©) ; 

• inset : bordure en creux dont chaque cote n'a qu'une seule couleur (figure 11-2, 
repere Q) ; 

• outset : bordure en relief dont chaque cote n'a qu'une seule couleur (figure 11-2, 
repere ©). 

Notons que, contrairement aux bordures, il n'est pas possible de definir une valeur de 
style differente pour chaque cote du contour. 

La couleur du contour 

La definition explicite de la couleur du contour est obtenue grace a la propriete outl i ne- 
col or, dont la syntaxe se rapproche de celle de border-color et est la suivante : 

outline-color: <couleur> | invert | inherit 

Le parametre <coul eur> est donne par un code de couleur, un mot-cle ou la fonction rgb ( ) 
comme habituellement. Le mot-cle invert permet d'obtenir un contour dont la couleur 
est l'inversion video de la couleur du fond sur lequel il est dessine. Nous sommes ainsi 
assure d'obtenir un effet visuel qui attire 1' attention. Comme pour le style, la couleur du 
contour s' applique a ses quatre cotes en meme temps. Si nous definissons cette propriete, 
il faut egalement obligatoirement definir outline-style, sinon aucun contour ne s'affi- 
chera. 

Pour creer un contour sur une zone de saisie quand elle recoit le focus avec le curseur, la 
touche de tabulation ou un raccourci clavier, nous ecrirons par exemple le code suivant : 

input: focusfoutline-style: dotted; outline-color: orange;} 

La largeur du contour 

Nous pouvons enfin definir une largeur pour le contour au moyen de la propriete outl i ne- 
width, dont la syntaxe est la suivante : 

outline-width: <long> | thin ] medium | thick | inherit 

Les parametres sont les memes que ceux de la propriete border-wi dth. Les mots-cles thin, 
medium et thick correspondent respectivement a un contour fin, moyen et epais, leur 
dimension reelle etant fonction du navigateur. Pour obtenir une dimension fixe, nous pre- 
ferons definir une longueur fixe dans les unites habituelles (px, em, ex, mm, cm, in, pc, pt). 

Comme nous l'avons deja signale, les dimensions du contour ne sont pas prises en 
compte dans le calcul de la dimension totale de la boite generee pour un element. Si le 
contour est plus large que la marge, il y a debordement sur les elements voisins. II faut 
done veiller a ne pas definir une largeur de contour inesthetique. 
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L'exemple 11-8 permet de mettre ces proprietes en oeuvre. Les elements <div> y ont une 
bordure et une marge, mais egalement un contour bleu de 7 pixels avec le style double 
(repere O)- Cela s' applique au premier element <div> (repere 0). L' association du 
selecteur d'attribut id et de la pseudo-classe :hover permet de modifier dynamiquement a 
la fois le contour mais aussi l'espacement et la bordure de 1' element (repere ©) du 
second element <div> (repere ©). Le survol du bouton inclus dans le paragraphe permet 
de faire apparaitre un contour autour de celui-ci (repere ©). Le contour defini dans la 
classe contour (repere ©) et applique a un element <span> (repere ©) permet de constater 
que ce dernier peut apparaitre sur plusieurs lignes comme le montre la figure 11-8. Enfin, 
la pseudo-classe :focus associee a l'element O'nput /> (repere 0) permet d'afficher un 
contour sur une zone de saisie de texte (repere 0) quand elle recoit le focus. 

Exemple 11-8. Creation de contours 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les contours</title> 
<link rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" title="contours"> 

div {border: 5px double red; margin: 20px; outline-width: 7px; outline-style: 
^•double; outline-color: blue;}© 

div#out:hover{outline: 20px groove #DDD; padding: 30px; background-color: yellow; 
^•border-style: dashed;}© 

button#tour:hover{border-style: dotted; border-width: 4px; outline-style: double; 
^•outline-color: red; outline-width: 5px}© 
.contourfoutline: 0.2em red solid}© 

input:focus{outline-style: dotted; outline-color: orange;}© 

</style> 
</head> 
<body> 

©<div>XHTML l.K/div> 

©<div id="out"> XHTML 1.1 </div> 

©<p>XHTML 1.1 est la solution d'avenir 

©<span cl ass="contour">qui merite <br />un investissement qui sera recompense. 
</span> 

©<button id="tour">XHTML l.K/button> 

^» Libelle 0<input type="text" name="saisie" size="20" tabindex="l" 
accesskey="A"/> 

</p> 
</body> 
</html> 
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La figure 11-8 montre le resultat obtenu quand la zone de saisie de texte a le focus et 
quand la seconde division est survolee par le curseur. Nous pouvons remarquer que son 
contour deborde en haut et en bas sur les elements adjacents. 
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Exercices 

Exercice 1 : Reproduisez le modele de boite de CSS (sans consulter la figure 11-1 bien 
stir). 

Exercice 2 : Creez une bordure double bleue de 7 pixels pour les divisions, puis une 
bordure basse rouge de style inset et de 1,2 em pour les titres <h2> inclus dans ces 
elements <div>. 

Exercice 3 : Creez des bordures jaune vif pour les elements O'nput /> de type text qui 
apparaissent uniquement quand ils regoivent le focus. 

Exercice 4 : Creez une bordure inferieure double bleue pour les liens <a> ; modifiez 
dynamiquement la couleur de cette bordure quand ces derniers sont survoles. 

Exercice 5 : Creez une bordure d'une couleur differente pour chaque cote de la boite de 
1' element <p>. 

Exercice 6 : Creez une marge gauche de 10 % pour les paragraphes. Reduire dynami- 
quement cette marge a 2 % quand ils sont survoles par le curseur afin de les mettre en 
evidence. 

Exercice 7 : Creez une bordure simple de 3 pixels et un espacement de 5 pixels pour les 
elements <bl ockquoteX Augmentez cet espacement a 10 % et rendez la bordure double 
quand ces elements sont survoles. 
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Exercice 8 : Creez un espacement gauche progressif de 1, 2 et 3 em respectivement pour 
les titres <hl>, <h2> et <h3>. 

Exercice 9 : Creez un contour rouge double de 5 pixels pour les boutons d'envoi des 
formulaires quand ils recoivent le focus. 
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Le style du texte et des liens 



Ceux qui ont connu l'element <f ont>, qui permettait de definir la taille du texte en HTML 
3.2, ne risquent pas de regretter sa disparition, tant il leur paraitrait pauvre par rapport 
aux multiples possibilites de gestion des polices offertes par les proprietes CSS. 

Dans une page web, le texte constitue souvent l'essentiel du contenu. Pour la definition 
de ses styles, nous allons suivre la meme logique que celle mise en oeuvre dans un traite- 
ment de texte. Nous pouvons par exemple agir sur la police de caracteres et leur taille, 
puis sur leur style physique comme le passage en gras de certaines parties du texte en 
gras, en italique ou souligne, ou bien encore comme la creation de lettrine. 

Les anciennes definitions de styles des liens, ecrites a l'aide d'attributs de l'element 
<body>, sont aujourd'hui obsoletes. Elles sont desormais remplacees par l'utilisation de 
pseudo-classes specifiques. 

Les polices 

La plupart des polices de caracteres que nous utilisons quotidiennement, telles que Times 
New Roman ou Arial, sont en realite des families de polices car elles se declinent en plu- 
sieurs polices reelles de types differents, par exemple une serie de caracteres normaux, 
une serie en gras, une serie en italique ainsi que les diverses combinaisons possibles. La 
propriete f ont-fami ly permet de definir une ou plusieurs families de polices par leur nom. 
Si ce nom est compose et contient des espaces, il doit etre ecrit entre guillemets. En sup- 
plement, CSS propose cinq families de polices generiques, le navigateur pouvant ainsi 
choisir la plus proche si celle qui est declinee explicitement n'est pas disponible sur le 
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poste client. Ces families generiques sont definies a l'aide des mots-cles suivants qui, 
pour leur part, ne doivent pas etre ecrits entre guillemets. 

• serif : il s'agit des polices a empattements et proportionnelles, c'est-a-dire pour les- 
quelles tous les caracteres n'ont pas la meme largeur (par exemple « w » et « i »). On 
trouve dans cette famille les polices Times New Roman, Baskerville, Georgia, 
Modern. 

• sans-serif : il s'agit des polices sans empattement et proportionnelles. On trouve dans 
cette famille les polices Arial, Abadi, Helvetica, Verdana. 

• cursive : il s'agit des polices dont l'aspect ressemble a l'ecriture manuscrite. Elles 
sont egalement proportionnelles. On trouve dans cette famille les polices Script et 
Vivaldi. 

• monospace : il s'agit des polices non proportionnelles dans lesquelles chaque carac- 
tere occupe la meme largeur, comme dans une machine a ecrire ou un editeur de 
code comme Edit Plus. On trouve dans cette famille des polices telles que Courier 
New. 

• fantasy : on classe dans cette famille toutes les polices originales ne rentrant pas dans 
les categories precedentes. Le rendu final de ce type de police est assez aleatoire selon 
les navigate urs. On peut par exemple citer la police Comic Sans MS. 

Voici la syntaxe de la propriete font-family : 

font-family :[[<nom> | <generic>] , ]* | inherit 

Nous pouvons definir plusieurs noms de families de polices a la suite en les separant par 
une virgule, puis terminer par un nom de famille generique. Dans ce cas, le navigateur 
tente d'utiliser la premiere en priorite et, si elle n'est pas disponible, il recherche la 
deuxieme, et ainsi de suite. Si aucune police ne correspond aux noms des families indi- 
quees, il utilisera la police generique precisee. II est done conseille de toujours indiquer 
une famille generique en fin de liste pour obtenir un resultat ressemblant a ce qui est 
attendu. 

L' exemple 12-1 permet de mettre en oeuvre cette propriete pour differents elements. La 
police par defaut de la page est definie comme etant « Times New Roman » avec le 
selecteur body (repere ©)• Cette police est done applicable a tous les elements n'ayant 
pas de style propre, par exemple <hl> (repere ©) et le troisieme paragraphe <p> (repere ©). 
Le premier paragraphe (repere Q) utilise une police Arial grace a un selecteur d'id 
(repere 0). Les classes p.cursiv (repere ©) et p. fantasy (repere ©) permettent respec- 
tivement d'appliquer une police de type script au deuxieme paragraphe (repere 0) et la 
police Comic Sans MS au dernier (repere ©). Pour 1' element <code> (repere ©) inclus 
dans le premier paragraphe, nous definissons une police a espacement fixe, Courier 
New (repere 0). 
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Exemple 12-1. Choix de la police 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les polices du texte</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=" . ./images/favicon.ico" /> 
<style type="text/css" title="fontes"> 

body{font-family: "Times New Roman", Georgia, serif}© 

p#a rial {font-family:Arial sans-serif;}© 

p.cursiv{font-family: Vivaldi , cursive; col or: white; background-col or: #333;}© 
p.fantasyffont-family: "Comic Sans MS",fantasy;color:white; 

background-color:#333;}© 
code{font-f ami ly : "Courier New" .monospace; }© 
</style> 
</head> 
<body> 

<hl>Les pol ices</hl>© 

©<p id="arial"> ARIAL : In principio creavit Deus caelum et terram terra autem 
erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas dixitque Deus fiat lux et facta est lux et vidit <br /> 

©<code>MONOSPACE:Deus fiat firmamentum in medio aquarum et dividat aquas ab aquis 
et fecit Deus firmamentum divisitque aquas quae erant sub firmamento ab his 
quae erant super firmamentum </code> 

<br /> Deus duo magna luminaria luminare maius ut praeesset diei et luminare minus 
ut praeesset nocti et Stellas et posuit </p> 

©<p cl ass="cursi v"> CURSIVE: In principio creavit Deus caelum et terram terra 
autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei 
ferebatur super aquas dixitque Deus fiat lux et facta est lux et vidit Deus 
lucem quod esset bona et divisit lucem ac tenebras appellavitque lucem diem et 
tenebras noctem factumque est vespere et mane </p> 

©<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas </p> 

©<p cl ass="f antasy"> In principio creavit Deus caelum et terram terra autem erat 

inanis et vacua et tenebrae super faciem abyssi et spiritus Dei </p> 
</body> 
</html> 

La figure 12-1 presente le resultat obtenu. Nous pouvons remarquer qu'a taille egale, la 
police script Vivaldi est beaucoup moins lisible que les autres. 
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La taille des polices 

Pour mettre en evidence les differentes parties de texte composant une page, il convient 
de bien determiner la taille des polices qui y seront utilisees. Celle-ci est definie grace a 
la propriete font-si ze, dont la syntaxe est la suivante : 

font-size: <taille-absolue> | <tai 1 1 e-rel ati ve> | <long> | <pourcent> | inherit 

Elle s'applique a tous les elements XHTML contenant du texte. La taille peut etre definie 
de maniere absolue, relative, a l'aide d'unites de longueur ou en pourcentage. Nous 
allons examiner ces differentes possibilites et les illustrer en detail. 

Les tallies absolues 

Les valeurs de taille absolue sont definies par les mots-cles suivants, de la taille la plus 
petite a la plus grande : 

xx-small, x-small, small, medium, large, x-large, xx-large. 
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Le mot-cle medium correspond a la taille normale choisie par l'utilisateur dans les prefe- 
rences de son navigateur ou definie par defaut par ce dernier. Un coefficient multi- 
plicateur de 1,2 est applique entre chaque taille et la suivante (il etait de 1,5 en CSS 1 et 
il garde cette valeur dans les anciens navigateurs). 

Si, par exemple, la taille correspondant au mot-cle medium est de 15 pixels, la taille cal- 
culee definie par smal 1 sera de 15 / 1,2 = 12,5 (arrondi a 12), et celle definie par 1 arge 
de 15x1, 2 =18 pixels, et ainsi de suite en montant ou en descendant dans l'ordre des 
mots-cles. L' exemple 12-2 permet de tester ces differentes tailles de caracteres. La 
taille des caracteres de la page est definie par defaut avec le mot-cle 1 arge pour le selec- 
teur body (repere O) ! cette valeur est done heritee par le paragraphe <p> (repere ©). 
Nous definissons ensuite les tailles des caracteres des elements <hl> a <h6> (reperes © 
a ©) avec les mots-cles de valeurs decroissantes, de xx-1 arge a x-smal 1 (reperes © a ©). La 
taille du contenu de l'element <address> est fixee a la valeur xx-small. Le pseudo- 
element :first-letter est utilise pour creer une lettrine de taille x-large (repere ©) 
pour le paragraphe situe en fin de page (repere ©) et dote d'une couleur de fond 
(repere ©). La couleur de fond de la lettrine met en evidence son independance par 
rapport au texte du paragraphe. 

Exemple 12-2. La taille des caracteres 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Taille des pol i ces</titl e> 

<meta http-equi v="Content-type" content="text/html ; charset^i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" titl e="fontes"> 

body{font-size: large;}© 

hl{font-size: xx-large;}© 

h2{font-size: x-large;}© 

h3{font-size: large;}© 

h4{font-size: medium;}© 

h5(font-size: small;}© 

h6{font-size: x-small;}© 

address{font-size: xx-small;}© 

p:first-letter{font-size: xx-large; color: #000; background-color: #AAA;}© 

p{background-color: #EEE;}© 
</style> 
</head> 
<body> 

<hl>Les tailles des caracteres : xx-1 arge</hl>© 
<h2>Les tailles des caracteres : x-1 arge</h2>© 
<h3>Les tailles des caracteres : large</h3>© 
<h4>Les tailles des caracteres : medium</h4>© 
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<h5>Les tallies des caracteres : small</h5>© 
<h6>Les tallies des caracteres : x-smal K/h6>© 
<address>Les tallies des caracteres <i>xx-smal K/iX/address>© 
<p> La genese : In principio creavit Deus caelum et terrain terra autem erat inanis 
et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit . . . </p>© 
</body> 
</html> 
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Figure 12-2 

Les tailles absolues des polices 



Les tailles relatives 

Les tailles relatives sont definies a l'aide des mots-cles smaller (plus petit) ou larger 
(plus grand). Les tailles reelles obtenues sont calculees d'apres la taille de la police de 
1' element parent si elle a ete fixee, ou par rapport a la taille par defaut utilisee par le navi- 
gateur. Le coefficient multiplicateur entre la taille normale et les tailles obtenues est aussi 
de 1,2 en CSS 2. 
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Dans l'exemple 12-3, la taille par defaut est definie pour <body> a la valeur medi um (repere O) 
Le texte de l'element <hl> (repere ©) est plus grand car sa taille est definie grace au mot- 
cle 1 arger (repere ©). Le texte de la premiere division <di v> (repere ©) herite de la taille 
medi um. Le texte de la seconde division <di v> (repere ©) a une taille explicite definie a la 
valeur x-large par la classe div.xlarge (repere ©). Le texte de l'element <p> (repere ©) 
inclus dans cet element <di v> est plus petit que celui de son parent car sa taille est definie 
par la valeur smal 1 er (repere 0), et celui de <span> (repere ©) est encore plus petit, car il 
est aussi defini a la valeur smal 1 er, l'element <code> etant enfant de l'element <p>. L'effet 
de la valeur smaller est done bien cumulatif a chaque inclusion d'element. Le texte qui 
suit (repere ©) etant directement inclus dans la division, il a la taille x-large. Le dernier 
paragraphe (repere ©) herite explicite ment de la taille definie pour la page (repere ©). 
En supposant que l'utilisateur ait classe par defaut dans son navigateur une taille stan- 
dard de 16 pixels, correspondant a la valeur medium, nous obtiendrions les tailles de 
polices suivantes : 

• pour <hl> : 16 x 1,2 = 19,2 pixels arrondis a 19 pixels ; 

• pour le premier element <di v> : 16 pixels par heritage ; 

• pour le contenu direct du second element <div> : 16 x 1,2 x 1,2 = 23 pixels ; 

• pour le paragraphe <p> inclus dans <di v> : 23 / 1,2 = 19 pixels ; 

• pour l'element <span> inclus dans <p> : 19 / 1,2 = 16 pixels. 

Toutes ces tailles de caracteres sont done liees a la taille par defaut definie dans le navi- 
gateur. 

Exemple 12.3. Les tailles relatives des polices 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Tailles relatives des polices </title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" titl e="fontes"> 

body{font-size: medium;)© 

hi {font-size: larger; }© 

div.xlarge{font-size:x-large; background-color: #BBB;}@ 
p. small (font-size: smaller; background-color: #CCC;}© 
.petit{font-size: smaller; background-color: #EEE;J© 
.herite{font-size: inherit;)© 
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</style> 
</head> 
<body> 

©<hl>Les tailles relatives des caracteres</hl> 

©<div> MEDIUM (heritee de body) : In principio creavit Deus caelum et terram 
terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus 
Dei . . .</div> 

©<div cl ass="xl arge">x-l arge : In principio creavit Deus caelum et terram autem 
erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas 

©<p cl ass="small "> SMALLER : In principio creavit Deus 
©<span class="petit">SMALLER : caelum et terram terra autem erat inanis 
</span> et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas 

</p> 

©In principio creavit Deus caelum et terram 
</div> 

©<p class="herite"> Cette taille de la police est heritee de body</p> 
</body> 
</html> 

La figure 12-3 presente le resultat obtenu pour ces definitions de tailles relatives. 
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MEDIUM (heritee de body):Iti principio creavit Deus caelum et terrain terra autem erat inanis et vacua et 
tenebrae super laciem abyssi et spiritus Dei terebato super aquas dixitque Deus tiat lux et facta est lux et 
vidit Deus lucent quod esset bona dixitque Deus flat lux et facta est lux et \idit Deus lucem quod esset 
bona 




x-large : In principio creavit Deus caelum et terram autem erat inanis 
et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super 
aquas 
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Les tallies dimensionnees 

Les tailles dimensionnees sont definies a l'aide d'un nombre positif et d'une unite de lon- 
gueur relative ou absolue (mm, cm, in, px, em, ex, pt, pc). Comme nous l'avons deja indi- 
que, le choix des unites doit etre fonction du media affichant la page. Les unites comme 
px, em, ex, se pretent mieux aux ecrans, et pt et pc aux medias imprimes. 

L'exemple 12-4 definit des styles de polices a l'aide de tailles dimensionnees. La taille 
par defaut de la page est fixee a 18 pixels (repere 0). Comme dans les exemples prece- 
dents, elle va done s'appliquer aux elements n'ayant pas de style propre, a l'instar de la 
premiere division (repere ©), ou en ay ant un explicitement herite (repere ©), comme le 
dernier paragraphe (repere ©). Les elements <hl> (repere ©) ont une taille de 35 pixels 
(repere ©). La classe div.pl usem (repere ©) permet de definir une taille de 1,5 em, soit 
50 % de plus que la hauteur de la boite correspondant a la police de 18 pixels. Elle 
s'applique a la premiere division (repere 0). La classe p.plusex (repere ©) permet de 
definir pour le paragraphe (repere ©) une taille egale a 150 % de celle du caractere « x » 
de la police en cours. La classe mm7 definit une hauteur explicite de 7 mm (repere 0) qui 
s'applique a 1' element <span> (repere ©). 

Exemple 12-4. Les tailles dimensionnees 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Dimensionnement des elements</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" titl e="fontes"> 

body{font-size: 18px;}0 

hl{font-size:35px;}0 

div.pl usem{ font- size: 1 . 5em ; background-col or :#BBB ; )0 

p. pi usex{ font- size: 1 . 5ex background- col or :#CCC; }© 

.mm7{ font- size: 7mm; background-col or:#EEE;}© 

.herite{font-size: inherit;)© 
</style> 
</head> 
<body> 

©<hl>Les tailles des caracteres : 35 pixels</hl> 

©<div> 18px (heritee de body) : In principio creavit Deus caelum et terrain terra 
autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei 
. . . </div> 

0<div class="plusem">1.5em : In principio creavit Deus caelum et terram autem 
erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas 
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©<p cl ass="pl usex"> 1.5ex : In principio creavit Deus 
©<span cl ass="mm7">7mm : caelum et terrain terra autem erat inanis</span> 

et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
</p> 

In principio creavit Deus caelum et terram</div> 

©<p cl ass="herite"> Cette taille de la police est heritee de body</p> 
</body> 
</html> 



Le resultat est presente a la figure 12-4. 
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Les tailles des caracteres : 35pixels 

ISpx (heritee de bodv):In principle creavit Deus caelum et teream *erra autem erat inanis et vacua et tenebrae 
super faciem abyssi ct spiritus Dei ferebatur super aquas dixkque Deus fiat lux et facta est lux et vidk Deus 
lucein quod esset bona dixitque Deus fiat lux et facta est lux e* vidit Deus lucein quod esset bona 

1.5 cm : In principio creavit Deus caelum ct terrain autem crat inanis ct 
vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super 
aquas 

1.5 cx : in principio creavit Deus 7 mm : caelum et Terrain terra autem erat inanis et 

vacua et tenebrae super faciem abvssi et spiritus Dei ferebatur super aquas dixitque Deus tiat lux et facta est 
lux et vidit Deus hirem quod esset bona 

In principio creavit Deus caelum et terrain 

Cctlc laillc de la police csi liciilcc dc body 
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Les tailles en pourcentage 

Pour definir les tailles des polices dans la propriete font-size, on peut aussi utiliser des 
pourcentages sous la forme d'un entier suivi du caractere %. Les dimensions des polices 
sont alors calculees par rapport a celles de l'element parent. Dans l'exemple 12-5, nous 
utilisons le meme contenu que dans l'exemple precedent et nous definissons la taille de 
base pour l'element <body> a 18 pixels (repere ©). Celle des titres <hl> (repere Q) est 
fixee a 250 %, soit une fois calculee a 250 % de 18 = 45 pixels (repere ©). La taille des 
caracteres de la premiere division <div> (repere ©) est heritee implicitement de celle de 
<body>. En revanche, dans la division suivante (repere 0), les caracteres ont une taille 
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de 150 %, soit 24 pixels (repere ©). Cette division contient un paragraphe avec une 
taille de police fixee a 70 % (repere ©), done 70 % de 24 pixels = 17 pixels, puisque la taille 
dans son parent est de 24 pixels. L' element <p> (repere ©) contient a son tour un ele- 
ment <span> (repere ©) dont le contenu a une taille de 60 % de celle de son parent, soit 
60 % de 17 pixels = 10 pixels (repere 0). Enfin, le dernier paragraphe (repere ©) herite 
explicitement de la taille de son parent, soit <body> (repere 0). 



Exemple 12-5. Les failles des polices en pourcentage 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Tailles des caracteres en pourcentage</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="tailles"> 

body{font-size: 18px;}0 

hl{font-size:250S!;}© 

div.plusl50{font-size: 150^ ; background-color: #BBB;}@ 

p.moins70{font-size: 70%; background-color: #CCC;}© 

.moins60{font-size: 60%; background-color: #EEE;}© 

.herite{font-size: inherit;)© 
</style> 
</head> 
<body> 

©<hl>Les tailles des caracteres : 250%</hl> 

©<div> 18px (heritee de body) : In principio creavit Deus caelum et terrain 
terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus 
Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux et vidit 
Deus lucem quod esset bona dixitque Deus fiat lux et facta est lux et 
vidit Deus lucem quod esset bona</div> 
©<div class="p1usl50">150% : In principio creavit Deus caelum et terram autem 
erat inanis et vacua et tenebrae super faciem abyssi et spiritus . . . 
flj)<p class="moins70">70% : In principio creavit Deus 
©<span class="moins60">60% : caelum et terram terra autem erat inanis</span> 
et vacua et tenebrae super faciem </p> 
In principio creavit Deus caelum et terram</div> 

©<p cl ass="herite"> Cette taille de la police est heritee de body</p> 
</body> 
</html> 
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En appliquant ces styles au meme code XHTML, nous obtenons l'affichage presente a la 
figure 12-5. 



Figure 12-5 
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La graisse du texte 

On nomme graisse d'une police de caractere le fait qu'elle soit en caractere gras ou mai- 
gre. Cette caracteristique est definie par la propriete font-weight, dont les valeurs sont des 
mots-cles ou des nombres. La syntaxe de la propriete font-weight est la suivante : 

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 
j 700 | 800 | 900 | inherit 

Les valeurs relatives bolder et lighter indiquent respectivement que la police doit etre 
plus grasse ou plus maigre que celle de l'element parent. Notons que si la police de Tene- 
ment parent est deja la plus grasse ou la plus maigre, l'utilisation de bolder ou 1 ighter 
sera sans effet visible. 

Les valeurs normal et bol d definissent respectivement l'utilisation de la graisse allant de la 
plus mince (valeur 100) a la plus forte (valeur 900). Nous precisons bien que cela est theo- 
rique car, pour une police donnee definie avec la propriete f ont-f ami 1 y, nous ne disposons 
pas de neuf graduations de graisse, mais en general de trois au maximum. L' equivalent 
du mot-cle normal est la valeur 400 et celui du mot-cle bol d est la valeur 700. 

La valeur inherit permet comme d'habitude de choisir explicitement la meme graisse 
que celle de l'element parent. 
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Dans l'exemple 12-6, nous definissons la graisse de <body> a la valeur normal (repere Q 1 
qui s'applique aux elements pour lesquels aucune graisse n'est definie explicitement. On 
pourrait done s'attendre a ce que les elements <div> (repere ©) et <h2> (repere ©) aient 
une graisse normale. Si e'est bien le cas pour <di v>, il n'en est rien pour <h2> qui apparait 
en gras, comme on peut le constater a la figure 12-6. En effet, il conserve son style par 
defaut qui est inclus dans le navigateur et qui apparait en gras. II faut done se metier de la 
feuille de style par defaut et ne pas oublier ses caracteristiques. La graisse des elements 
<hl> et <em> est fixee a la valeur bolder (repere ©), ils seront done plus gras que leurs 
parents. Le selecteur di v . gras (repere ©) permet d'appliquer la valeur bol d a une division 
(repere Q). Elle contient un element <span> (repere ©) pour lequel la graisse est fixee a 
la valeur 300 (repere 0). Les paragraphes ont quant a eux une graisse systematiquement 
moins forte que leur parent (repere 0). 

Exemple 12-6. La graisse du texte 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Graisse du texte</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="graisse"> 
body{font-weight:normal ;)© 

hl,em{font-weight: bolder; background-color: #CDD;)© 
div.gras{font-weight:bold; background-color: #EEE;)© 
p{font-weight: lighter;)© 

span{font-weight: 300;background-color: #CDD;}@ 
</style> 
</head> 
<body> 

<hl>Graisse du texte <span>XHTML et CSS 2</spanX/hl>© 
<h2>XHTML</h2>© 

©<div> In principio creavit Deus <em>caelum et terram</em> terra autem erat 

inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super 
aquas . . .</div> 

©<div cl ass="gras"> In principio creavit Deus 
© <span>cael urn et terram</span> terra autem erat inanis et vacua et tenebrae 

super faciem abyssi et spiritus Dei ferebatur super aquas dixitque. . . 
©<p>In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et spiritus Dei ferebatur super . . .</p> 
Deus fiat firmamentum in medio aquarum et dividat aquas . . . 
</div> 
</body> 
</html> 



Les styles CSS 



Partie II 



Ces styles creent l'affichage presente a la figure 12-6. 
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Graisse du texte XHTML et CSS 2 

XHTML 

In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas dixitque Deus fiat hut et facta est lux et vidit Deus hicem quod esset bona In prkicipio credit Deus caelum et terrain 
terra autera erat inanis et vacua et tenebrae super factetn abyssi et spiritus Dei ferebautr super aquas dixitque Deus tiec lux et facta 
est lux et vidk Deus lucern quod esset bona et divisit tucetn ac tetiebras appellavitque 

In principio creavit Deus caelum et terrain terra autem erat mail is et vacua et tenebrae super faciem abyssi et spiritus 
Dei feiflj.iLur suptr Bquas dmlijue Dtii; flal lui el fad it est \u\ eL \iilil Deu^s lutein quud tb^tl bunn 

In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas dixitque Deus fiat lux et facta est lux et vidit Deus hicem quod esset bona et dKisit lucern ac tetiebras appellavitque 
lucein diem et tenebras noctem factumque est vespere et mane dies unus dixit quoque 

Deus fiat firmamcntum in medio aquarum et clividar aquas ah nquis et feeit Deus firma men turn divisitque aquas quae 
erant sub firmatnento ab his quae erant super firm amentum et factum est ita vocavitqne Deus firmamentum caelum et 
factum est vespere et mane dies secundus dixit vero Deus 
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Figure 12-6 

La graisse du texte 



Le style des polices 

Comme dans un traitement de texte, nous pouvons modifier le style des polices de carac- 
teres a l'aide de la propriete font-styl e, qui permet principalement de mettre un texte en 
italique. La syntaxe de cette propriete est la suivante : 

font-style: normal [ italic | obi i que | inherit 

Dans la pratique, les valeurs ital ic et obi ique donnent le meme resultat pour une police 
donnee, y compris dans les navigateurs les plus recents. A la valeur normal correspond le 
style de caractere droit, qui est la valeur par defaut. 

Dans l'exemple 12-7, le style de la page est defini a la valeur normal (repere O) et les ele- 
ments <hl>, <em> et <span> egalement, avec en plus une couleur de fond pour les mettre en 
evidence (repere ©). Le selecteur hi span definit le style ital ic pour les elements <span> 
enfants de <hl> (repere ©). Cela s' applique a la deuxieme partie du titre principal (repere ©)• 
Le selecteur hl+h2 permet d'appliquer le style Italic uniquement a l'element <h2> qui suit 
immediatement <hl> (repere Q) et non pas au second (repere ©). Nous definissons 
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ensuite deux classes pour l'element <p> avec les valeurs respectives italic et oblique 
(reperes et ©). Nous pouvons constater sur la figure 12-7 que leurs contenus ont la 
meme apparence. Les elements <em> et <span> (reperes © et ©), inclus dans les paragra- 
phes (reperes © et ©), ayant un style explicite (repere ©) n'heritent pas de leur parent 
respectif. 



Figure 12-7 

Le style du texte 
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ITALIC 

IJ.lLIC . iti ptiftcipio ceaxit Deus cochim ct terrain tewa autem e-rat h^anis et vacua et teneb^ae super facie'ti abyss; 
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Dei ferebatur sitper aquas dixitqice Deus pat hi.x et facta est lux et vidit Deus 'uce'u quod esset hova et divisit htcern 
at teriebras appeUa\;tque 

OBLIQUE 
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Exemple 12-7. Le style des polices 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Style du texte</titl e> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="graisse"> 
body{font-style: normal;}© 

hl,em,span{font-style: normal; background-color: #CCC;)@ 
hi span {font-style: italic; background-color: #AAA;}@ 
hi + h2 {font-style: italic; background-color: #DDD;}© 
p.italic{font-style: italic; background-color: #EEE;}0 
p. obi ic{font-style: oblique; background-color: #EEE;}© 
</style> 
</head> 
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<body> 

©<hl>Style du texte ©<span>XHTML et CSS 2</spanX/hl> 
0<h2>ITALIC</h2> 

©<p class="italic">ITALIC : In principio creavit Deus ©<em>caelum et terrain 
</em> terra autem erat inanis et vacua et tenebrae super faciem abyssi et 
spiritus Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux 
et vidit . . .</p> 

©<h2>0BLIQUE</h2> 

©<p cl ass="obl i c">0BLIQUE : In principio creavit Deus ©<span>cael um et terram 
</span> terra autem erat inanis et vacua et tenebrae super faciem abyssi 
. . .</p> 
</body> 
</html> 



Nous pouvons egalement enrichir la presentation du texte a l'aide de proprietes annexes. 
La propriete font-variant, dont la syntaxe est : 

| font-vari ant : smal 1 -caps | normal | inherit 

permet de transformer toutes les minuscules d'un texte en petites majuscules quand on 
lui attribue la valeur smal 1 -caps, les majuscules conservant leur taille normale. La valeur 
normal permet de conserver pour le texte 1' aspect qu'il a dans le code XHTML. 

Quand les donnees textuelles proviennent soit d'une base de donnees, soit des utilisateurs 
eux-memes, et qu'elles sont utilisees pour creer des pages dynamiques, il peut etre utile 
d'uniformiser la casse du texte. Chaque utilisateur peut en effet avoir saisi son nom par 
exemple dans une casse differente. Grace a la propriete text-transform, il est possible 
d'agir sur la casse du texte d'un element. Sa syntaxe est la suivante : 

j text-transform : uppercase | lowercase | capitalize | none | inherit 

Elle est heritee par tous les elements enfants. La valeur none implique qu'il n'y a aucune 
modification de la casse. Les valeurs des mots-cles sont les suivantes : 

• uppercase : le texte est mis en majuscules ; 

• 1 owercase : le texte est mis en minuscules ; 

• capi tal i ze : seule la lettre initiale de chaque mot est mise en majuscules. 

Nous pouvons enrichir la presentation du texte avec certains attributs particuliers, possi- 
bles en traitement de texte, comme le soulignement. La propriete text-decoration permet 
la realisation de ces effets. Voici sa syntaxe : 

text-decoration :none | [underline || overline || line-through || blink] | inherit 

La valeur none elimine tout effet et peut permettre par exemple de supprimer le souligne- 
ment qui apparait par defaut pour les liens. Les differents mots-cles pouvant etre utilises 
ont la signification suivante : 

• underl i ne : le texte est souligne (comme pour les liens). 
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• overl ine : le texte est surligne (pas au sens ou on l'entend actuellement en utilisant un 
surligneur, mais au sens propre, un trait horizontal apparaissant au-dessus du texte). 
Pour surligner au sens courant, il faut utiliser la propriete background-col or. 

• 1 i ne-through : le texte est barre par un trait horizontal place a mi-hauteur. 

• blink : le texte clignote (il sagit de 1' equivalent de l'ancien element <bl in k> qui n'etait 
visible que dans Internet Explorer). 

L'exemple 12-8 permet de mettre en oeuvre ces differentes proprietes pour personnaliser 
des textes. Les titres <hl> (repere ©) sont definis avec une initiale en majuscule a chaque 
mot et sont soulignes (repere O)- Les titres <h2> (repere ©) conservent leur casse et sont 
surlignes (repere ©). Les titres <h3> (repere ©) sont affiches en petites majuscules 
(repere ©). Les elements <span> sont a priori tous en majuscules (reperes ©. © et ©). 
Cependant, trois classes permettent localement de modifier cet etat. La classe mi n met le 
contenu en minuscules (reperes et ©). La classe raye permet de « rayer HTML du 
monde » (reperes © et ©) et la classe cligno attire l'attention en faisant clignoter 
« XHTML 1.1 » des feux de la nouveaute (reperes © et ©). 

Exemple 12-8. Les modifications du texte 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Transformations et decorations du texte</title> 
<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" titl e="transformations"> 

hl{text-transform: capital ize;text-decoration: underline; 
background-color: #CCC; }© 

h2{text-transform: none;text-decoration: overl ine;background-color: #EFF;}© 

h3{ font -van' ant :smal 1 -caps ; background-color: #CCF; }© 

spanltext-transform: uppercase ;}© 

.minftext-transform: lowercase; ;background-color: black;color:white; }© 
. raye {text-decoration: 1 i ne-through ; }© 

.cligno{text-decoration: blink;color: red;font-weight: bold;}© 
</style> 
</head> 
<body> 

©<hl>style du texte ©<span>xhtml et CSS 2</spanX/hl> 

©<h2>XHTML : c'est l'avenir. ©<span cl ass="raye">HtMK/span> est mort</h2> 
©<h3>XHTML 1.1 en est la derniere version parue </h3> 

©<p>Le langage ©<span class="cligno">XHTML l.K/span> : Les elements ©<span 
^» class="min">HTml , HeAd et B0DY</span> constituent la base de la structure d'une 
page ©<span>xhtml</span>.<br />In principio creavit Deus caelum et terram 
terra autem erat inanis et vacua et . . . </p> 
</body> 
</html> 
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La figure 12-8 permet de visualiser les effets obtenus. 



Figure 12-8 
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Regler l'interligne 

Afin d'ameliorer la lisibilite du texte d'un element, tel qu'un paragraphs, en « aerant » 
son contenu, nous pouvons modifier l'interligne par defaut a l'aide de la propriete 1 i ne- 
height dont la syntaxe est : 

line-height:normal | <nombre> | <long> | <pourcent> [ inherit 

La valeur de cette propriete, toujours heritee par les elements enfants, est generalement 
superieure a celle de la propriete font-size. Dans ce cas, la difference entre ces deux 
valeurs est la somme des deux demi-interlignes, situes l'un au-dessus de la ligne de texte 
et l'autre en dessous. La valeur normal definit explicitement l'interligne par defaut corres- 
pondant a la police employee. Le parametre <nombre> definit un coefficient multiplicateur 
qui est applique a la valeur de la taille de police definie par la propriete font-size. Les 
valeurs de <nombre> peuvent etre decimales mais pas negatives. Ce coefficient est herite 
par les elements enfants. La valeur <1 ong> est donnee par un nombre positif et une unite 
de longueur habituelle relative ou absolue (em, ex, px, mm, cm, in, pc, pt). II est enfin possi- 
ble de definir une valeur en pourcentage qui sera appliquee a la taille de la police specifiee 
par la propriete font-si ze. 

Dans l'exemple 12-9, nous definissons tout d'abord une taille de caracteres de 20 pixels 
(repere 0). L'interligne pour l'element <hl> est fixe a la valeur 2 em (repere 0) et celui de 
<h2> a 0,6 em (repere ©). La figure 12-9 permet de constater que dans ce dernier cas les 
caracteres montants et descendant tels que « p » ou « f » sont plus hauts que l'interligne 
et sortent de la boite de contenu de l'element materialisee par une couleur de fond. Les 
classes norm (repere ©) et serre (repere 0) permettent de comparer des paragraphes avec 
l'interligne standard (repere 0) et tres resserre (repere ©). Avec l'element <span> (repere ©), 
qui utilise la classe norm, on peut materialiser au moyen de sa couleur de fond les diffe- 
rences d'interligne, quand il est inclus dans l'element <hl>. 
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Exemple 12-9. Definition de I'interligne 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Reglage de 1 'interligne</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="interligne"> 
body{font-size: 20px;}© 

hl{line-height: 2em; background-color: #CCC;}© 

h2{line-height: 0.5em; background-color: #AAA;}@ 

.norm{line-height: 1 em; background-color: yellow;)© 

.serreO ine-height: 0.7em; background-color: #EEE;)@ 
</style> 
</head> 
<body> 

©<hl>Style du texte ©<span cl ass="norm">XHTML et CSS 2</spanX/hl> 
©<h2>XHTML : pas de quoi s'en faire un monde</h2> 

©<p cl ass="norm">In principio creavit Deus caelum et terram terra autem erat 
inanis et vacua et tenebrae super faciem abyssi et spiritus Dei . . .</p> 

©<p cl ass="serre">In principio creavit Deus caelum et terram terra autem erat 

inanis et vacua et tenebrae super faciem abyssi et spiritus. . .</p> 
</body> 
</html> 

En appliquant ce code, nous obtenons le resultat presents en figure 12-9. 
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XHTMT, : pas de quoi s'en faire un moiide 

In principle creavit Dens caelum et terrain terra autem erat inanis et vacua et tenebrae 
super faciem abyssi el spiritus Dei ferebatur super aquas dixilque Deus fiat lux et facta 
est lux et vidit Deus lncem quod esset bona In principio creavit Deus caelum et terrain 
terra autem erat munis el vacua el tenebrae super faciem abyssi el spiritus Dei ferebatur 
super aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et 
divisil lutein ac tenebrss appellavitove 

In principio creavit, Deus, caelum e,t terram terra autem erapi;anis et vacua et tenebrae 
super facieui.abvssi et spiritus Dei ferebatur super aquas dixitque Deus tiat lux et tacta 
est lux et vidit Deus lucem quod esset bona In principio creavit Deus caelum et. terrain 
terra autem era! mams el vapuaet tenebrae super faciem abyssi el spiritus Dei ferebafe 
sunpei; aortas dixitque,Dews tint lux ft tacta estlux et virtu Dews lucent qnnd e^e.x bona et 
divtsit lucem ac tcnebras appcllavitquc 
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Definir plusieurs proprietes en une fois 

Comme nous l'avons deja vu avec d'autres proprietes, border par exemple, il est aussi 
possible de definir plusieurs proprietes de police a l'aide d'une seule propriete. En 
effet, la propriete font permet en une seule definition de creer des styles en definissant 
des valeurs pour les proprietes : font-weight, font-variant, font-style, font-size, 
line-height et font-family. Par rapport a la propriete font-family, font offre des 
options supplementaires pour le choix de la police. Nous pouvons en effet definir des 
styles de polices ayant les caracteristiques de celles utilisees pour le systeme 
d' exploitation lui-meme. 

Sa syntaxe generale est la suivante : 

font: [[<font-style> || <font-variant> || <font-weight>] ? <font-size> [/ <line- 

height>] ? <font-fami ly> ] ] caption | icon | menu | message-box | smal 1 -caption 
| status-bar [ inherit 

Chacun des parametres de cette propriete globale peut prendre les valeurs qui corres- 
pondent aux proprietes individuelles que nous venons d'aborder dans les sections 
precedentes. 

Nous pouvons par exemple creer le style suivant : 

p{f ont : i tal i c small-caps bold 14px/18px Arial, sans-serif 

Cette declaration est alors equivalente a 1' ensemble des declarations suivantes : 

p{font-style:italic; font-variant:small-caps; font-weight:bold; font-size:14px; 
| line-height:18px; font-family:Arial .sans-serif ; } 

Les valeurs systeme sont definies de la maniere suivante : 

• capti on : font reference a la police systeme utilisee pour les boutons et les listes derou- 
lantes des formulaires. 

• icon: police systeme de legendes des icones du bureau ; 

• menu : police des menus des applications ; 

• message-box : police des boites de dialogue (boite d'alerte par exemple) ; 

• smal 1 -caption : police des controles ; 

• status-bar : police de la barre d'etat. 

L'utilisation de ces valeurs dans la propriete font implique l'acceptation de toutes les 
caracteristiques de la police resultante. Pour modifier une caracteristique particuliere, 
comme la taille, il faut ensuite redefinir la propriete concernee. Notez que Explorer ne 
prend pas en compte cette redefinition de la taille et affiche la police sans changer ses 
caracteristiques. 
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Ainsi, nous pouvons ecrire : 

p{font:menu; font-size: lem;} 

pour obtenir la police systeme des menus, et redefinir sa taille separement dans Mozilla 
par exemple. 

L'exemple 12-10 presente ci-apres une utilisation possible de la propriete font. 

L'alignement et l espacement du texte 

Afin d'ameliorer ou de rendre plus originale la presentation du texte, nous disposons de 
plusieurs proprietes d'alignement, d' indentation et d'espacement. 

L'alignement horizontal du texte 

La propriete text-al ign, dont la syntaxe est la suivante : 

text-align: left | center | right [ justify | inherit 

n'est applicable qu'aux elements de blocs. Selon le mot-cle choisi, le texte sera aligne 
respectivement a gauche, au centre, a droite, ou justifie. Le style defini etant transmis aux 
elements enfants, il faut done prendre des precautions et eventuellement definir un autre 
style pour ces elements enfants. 

Dans l'exemple 12-10, le contenu des elements <hl> (repere 0) est centre (repere ©>. et 
celui des elements <h2> aligne a gauche, soit sa valeur par defaut (repere 0). Avec la 
classe p. droit (repere 0) on peut aligner le contenu du premier paragraphe (repere @) a 
droite, et avec la classe p. justifie (repere 0) on peut justifier le texte du second (repere 0) 
dans les navigateurs les plus actuels, et meme dans Explorer 6. 



Exemple 12-10. Les styles d'alignement du texte 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les alignements</title> 

<meta http-equi v="Content-type" content="text/html ; charset^i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="align"> 

hl{text-align: center; background-color: #CCC; Q 

h2{text-align: left; background-color: #AAA;}0 

p.droit{font: menu; font-size: 1.5em; text-align: right ; 
background-color: #EEE;}© 

p. justifie{text-al ign: justify; background-color: #EEE;}0 
</style> 
</head> 
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<body> 

0<hl>Style du texte <span>XHTML et CSS 2</spanX/hl> 
<h2>XHTML : pas de quoi s'en faire un monde</h2> 

©<p cl ass="droit">In principio creavit Deus caelum et terram terra autem erat 
inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
. . .</p> 

©<p class="justifie">In principio creavit Deus caelum et terram terra autem 
erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super . . .</p> 
</body> 
</html> 

La figure 12-10 montre les differents types d'alignement. 
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Style du texte XHTML et CSS 2 

XHTML : pas de quoi s'en i'aire un monde 

In principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae super faciem abyssi et 
spiritus Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux etvidit Deus lucem quod esset bona In 
piiritipfiu ueavil Deub Ldtflum et leridiri leiia duterri eidL irimiis et vacua et Leriebrde buper fader n dbybM et 
spiritus Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux etvidit Deus lucem quod esset bona et 

divisit lucem ac tenebras appellavitque 



In principio creavit Deus caelum et terram terra autem erat inanis et vacua et Tenebrae 
super faciem abyssi et spiritus Dei ferebatur super aquas dixitque Deus fiat lux et facta 
est lux et \idit Deus lucem quod esset bona In principio creavit Deus caelum et terram 
terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et dhisit lucem ac tenebras appcDavitquc 

V 
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L'indentation du texte 

L' indentation du texte est definie par defaut pour certains elements comme <bl ockquote>, 
ou les elements de liste <ul> et <ol> par exemple. Nous pouvons definir une indentation 
personnalisee mais il faut noter qu'elle ne s'applique qu'a la premiere ligne de texte, ce 
qui, pour un titre, ne presente generalement pas de probleme, mais ne correspond pas for- 
cement a l'effet desire pour un paragraphe. Pour decaler tout un paragraphe, il vaudra 
mieux avoir recours soit a la definition d'une marge, soit a un positionnement de l'element 
(voir chapitre 13). 
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L' indentation du texte peut etre definie a l'aide de la propriete text-indent, dont la syn- 
taxe est la suivante : 

text-indent:<long>|<pourcent>| inherit 

Elle est applicable aux elements de bloc, aux cellules des tableaux, et elle est heritee. 

Les valeurs d' indentation peuvent etre definies a l'aide d'un nombre et d'une unite de 
longueur habituelle (em, px, ex, mm, cm, in, pt, pc) ou en pourcentage. Dans ce dernier 
cas, 1' indentation est calculee par rapport a la largeur de 1' element qui contient le 
texte. Les valeurs negatives sont admises pour creer une saillie a gauche (pour le sens 
de lecture europeen avec di r = "1 tr") ou le contraire, sinon par rapport a l'alignement 
normal. 

Dans l'exemple 12-11, le titre <hl> (repere 0) est indente de 20 % de la largeur de l'ele- 
ment, soit, faute de dimensionnement, de 20 % de la largeur de la fenetre du navigateur 
(repere O)- Le titre <h2> est indente de 5 em (repere 0). Quand l'indentation s'applique 
a des elements imbriques, nous pouvons obtenir des effets interessants. L'indentation de 
l'element <div> est fixee a 15 % (repere 0), ce qui s'applique a son contenu direct 
(repere 0). Pour l'element <p> qu'elle contient, l'indentation est negative (repere 0) et 
elle contraint a definir une marge gauche, sinon le texte « XHTML 1.1 » n'est plus visi- 
ble, car il disparait sur la gauche de la page. Les listes (repere 0) ont une indentation par 
defaut mais nous pouvons la fixer a la valeur desiree pour personnaliser leur presentation 
(repere 0). 



Exemple 12-11. L'indentation du texte 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Indentation du texte</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="indentattion"> 

hl{text-indent: 20%; background-color: #CCC; O 

h2{text-indent: 5em; background-color: #AAA;}0 

div{text-indent: background-color: #EEE;)0 

p.ret{text-indent: -5em; margin-left: 10em; background-color: #DDD;}0 
ol {text-indent: 15ex; background-color: #CCF; list-style-position: inside;}0 
</style> 

</head> 

<body> 

<hl>Style du texte <span>XHTML et CSS 2</spanX/hl>0 
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<h2>XHTML 1.1 : l'avenir est la</h2>© 
<div>© 

Le langage XHTML dans sa version la plus actuelle : In principio creavit Deus 
XHTML et CSS terra autem erat inanis et vacua et tenebrae super faciem abyssi 
et spiritus Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux© 

<p cl ass="ret">XHTML 1.1 : In principio creavit Deus caelum et terrain terra autem 
erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 

^» super aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod 
esset bona In principio creavit Deus caelum et terrain terra autem erat inanis 
et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et 
divisit lucem ac tenebras appel 1 avitque</p> 

<ol> 

<1 i >XHTML 1.0 strict</li> 
<li>XHTML 1.0 frameset</li> 
<li>XHTML l.K/li> 
</ol> 
</div> 
</body> 
</html> 

La figure 12-11 montre l'affichage obtenu. Les couleurs de fond permettent de situer les 
differentes boites de contenu des elements. 
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L'espacement des mots et des caracteres 

Chaque police est definie avec un espacement donne entre chaque caractere et une lar- 
geur fixe qui cree l'espacement entre chaque mot. Nous pouvons intervenir sur l'espace- 
ment des caracteres en le definissant au moyen de la propriete letter-spacing, dont la 
syntaxe est la suivante : 

letter-spacing: normal |<long>| inherit 

En utilisant le mot-cle normal, nous definissons explicitement un espacement egal a la 
valeur initiale fixee par la police. Pour creer un espacement personnalise, il faut utiliser 
une valeur de longueur definie par un nombre et une unite relative ou absolue (em, px, ex, 
mm, cm, in, pt, pc). La valeur indiquee dans le parametre <1 ong> n'est pas celle de l'espa- 
cement lui-meme mais celle qui s'ajoute ou se soustrait a la valeur normale associee a la 
police utilisee. Le mot-cle normal correspond a cette valeur, et done a la valeur de 
<long>. Les valeurs negatives sont done utilisees pour diminuer l'espacement. Agir sur 
l'espacement des lettres risque de donner l'aspect a la police utilisee d'une police a espa- 
cement fixe telle que nous pouvons le definir en definissant la propriete font-family a la 
valeur Courier New ou le mot-cle monospace. 

La definition de cette propriete implique que l'espacement entre les mots d'une phrase 
soit aussi conditionne par la valeur choisie pour 1 etter-spacing. Afin de definir indepen- 
damment l'espacement entre les mots, il faut utiliser la propriete word-spacing, dont la 
syntaxe est la meme que precedemment : 

word-spacing : normal | <long> | inherit 

Elle est egalement heritee et les valeurs negatives sont admises pour diminuer l'espace- 
ment. L'exemple 12-12 permet de mettre en oeuvre ces deux proprietes et d'effectuer des 
comparaisons d' aspect pour differentes valeurs. Les styles appliques a 1' element <p> 
(repere O) creent un texte tres resserre pour le premier paragraphe (repere ©). Les ele- 
ments <span> ont au contraire un style (repere 0) qui permet d'etirer le texte de leurs 
contenus (reperes 0, 0, et 0), independamment du style de leur parent. La classe 
space (repere 0) permet d'afficher le meme texte avec un espacement beaucoup plus 
grand dans le second paragraphe (repere 0). 

Exemple 12-12. L'espacement des lettres et des mots 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>L'espacement des lettres et des mots</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" title="l iens"> 

pfletter-spacing: -O.lem; word-spacing: O.7em;}0 

spanfletter-spacing: lOpx; background-color: #EEE;}0 

.spacefletter-spacing: 0.2em; word-spacing: lem;}0 
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</style> 
</head> 
<body> 

©<p>Le langage ©<span>XHTML 1.1 </span>: Les elements html, head et body 
constituent la base de la structure d'une page ©<span>XHTML</span>. 
In principio creavit Deus caelum et terram terra autem erat inanis et . . .</p> 
©<p cl ass="space">Le 1 angage © <span>XHTML 1.1 </span>: Les elements html, head 
et body constituent la base de la structure d'une page ©<span>XHTML</span>. 
In principio creavit Deus caelum et terram terra autem erat inanis et . . .</p> 
</body> 
</html> 



La figure 12-12 montre les grandes differences de presentation obtenues avec ces styles. 
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Figure 12-12 

L'espacement des lettres et des mots 



La derniere possibilite de gestion des espaces est offerte par la propriete white-space qui 
permet de choisir le mode d'affichage des differents caracteres d'espacement places dans 
le code XHTML. Nous retrouvons ici 1' equivalent de ce qu'il est possible de faire avec 
1' element <pre>. Sa syntaxe est la suivante : 

white-space: normal | pre | nowrap | inherit 

La valeur normal cree l'affichage habituel des navigateurs (un seul espace dans la page, 
quel qu'en soit le nombre dans le code). La valeur pre preserve tous les caracteres 
d'espacement presents dans le code. On peut alors directement positionner les differents 



Le style du texte et des liens 




Chapitre 12 



contenus d'un element dans l'editeur de code, en particulier pour afficher des listings. La 
valeur nowrap gere les espaces de la meme facon que la valeur normal a la difference 
quelle desactive en plus les sauts de lignes, le contenu etant done affiche sur une seule 
ligne, le visiteur est done contraint d'effectuer un defilement horizontal, ce qui ne facilite 
pas la lecture du contenu s'il est long. 

L'exemple 12-13 presente une illustration de cette propriete avec la valeur pre (repere Q) 
pour afficher du code XHTML contenu dans un element <code> (repere ©). 

Exemple 12-13. Gestion des espaces 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Gerer les espaces</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 

<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 

<style type="text/css" titl e="espaces"> 
code{white-space: pre; background-color: #EEF;|© 

</style> 
</head> 
<body> 

<hl>Du code XHTML</hl> 



<head> 

<title> XHTML et CSS : Cours et exercices </title> 
<meta name="Generator" content="EditPl us" /> 
<meta name="Author" content="Jean ENGELS" /> 
<meta http-equiv="Content-Type" content="text/html ; 

charset=iso-8859-l" /> 
<link rel ="shortcut icon" type="images/x-icon" href="favicon.ico" /> 
<style type="text/css" media="al 1 ">@import "base. ess"; 
</style> 
</head> 
</code> 
</p> 
</body> 



<P> 

<code>© 



</html> 
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La figure 12-13 montre qu'avec la valeur pre tous les espaces et sauts de lignes sont bien 
preserves dans la page affichee. 
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En utilisant la valeur normal , ou encore en ne definissant pas la propriete, nous obtiendrions 
le resultat presente ci-apres, qui est bien peu lisible par rapport au precedent. 

<head> <title> XHTML et CSS : Cours et exercices </title> <meta name= 
"Generator" content="EditPl us" /> <meta name="Author" content="Jean ENGELS" /> 
<meta http-equi v="Content-Type" content="text/html ; charset=iso-8859-l" /> 
< 1 ink rel ="shortcut icon" type="irriages/x-i con" href ="favi con . i co" /> 
<style type="text/css" medi a = " a 1 1 ">@import "base. ess"; </style> </head> 



Le style des liens 

En faisant l'inventaire des proprietes CSS, il faut bien reconnaitre qu'aucune d'entre 
elles ne s' applique specifiquement aux liens hypertextes. Cependant, il n'est sans doute 
pas inutile de consacrer une section aux styles que nous pouvons appliquer aux liens 
generalement crees avec un element <a>. Un lien presente en effet plusieurs etats diffe- 
rents lors de la consultation d'une page par un visiteur. Lors du premier chargement de la 
page, il est vierge et pret a etre active. Au moment du clic sur le texte ou 1' image, il est 
dit actif. Apres ce clic, que le lien soit interne ou externe, l'origine du lien est dans l'etat dit 
« visite ». A chacun de ces etats correspondent des styles, et en particulier des couleurs 
par defaut relativement standard et definies dans la feuille de style par defaut preconisee 
par le W3C (voir l'annexe B). J'ai deja indique qu'il fallait manier les couleurs des liens 
avec precaution dans la mesure ou l'internaute lambda est habitue a ces styles (couleur 
generalement bleue et soulignement). Cependant, on peut etre contraint de les modifier, 
par exemple pour s' adapter a une couleur de fond particuliere de la page. 
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Pour creer des styles propres aux liens, nous utilisons les pseudo-classes qui leur sont 
dediees et des proprietes deja rencontrees par ailleurs comme la couleur du texte, celle du 
fond ou la definition d'une police particuliere. 

Les pseudo-classes :link, :visited et :active sont prevues a cet effet, les deux premieres 
n'etant applicables qu'aux liens. Nous rappelons ici leurs definitions, deja vues au 
chapitre 9 ; 

• : 1 i nk, qui s' applique au lien non encore visite avant toute action du visiteur. Elle permet 
de definir les styles du lien, generalement textuel. 

• : visited, qui s' applique au lien qui a deja ete visite au moins une fois. Elle permet par 
exemple de changer la couleur du lien. 

• : active, qui s'applique au lien au moment precis ou l'utilisateur maintient le bouton 
de la souris enfonce, quand le curseur est positionne sur le texte du lien. Cette pseudo- 
classe est mal prise en compte par les navigateurs et ne presente pas reellement un 
interet fondamental aujourd'hui. 

Nous pouvons egalement ajouter les pseudo-classes :focus et :hover qui ne sont pas speci- 
fiques aux liens mais que nous pouvons utiliser : 

• : focus, qui permet de modifier le style d'un lien quand il recoit le focus a l'aide de la 
touche Tab ou d'un raccourci clavier. 

• : hover, qui permet de donner un style particulier quand le curseur est positionne sur le 
lien. L' effet realise, comme un changement de couleur par exemple, est reversible 
instantanement quand le curseur quitte la zone du lien. 

L' exemple 12-14 illustre l'emploi de ces differentes pseudo-classes. La page contient une 
liste a puce de liens (reperes ©, © et ©). Le selecteur a:link cree le style de base des 
liens soulignes et de couleur bleue (repere ©)• Les liens ayant le focus ont une taille de 
police double de la normale et une bordure double jaune (repere ©). Lusage de la 
pseudo-classe :hover necessite un selecteur plus complexe ul 1 i a : hover, car le selecteur 
simple a : hover ne fonctionne pas dans la plupart des navigateurs. II permet de gerer une 
taille de police de 25 pixels, une bordure, une couleur de fond et de texte modifiee (repere ©). 
Les liens visites sont affiches en vert sur fond gris (repere ©), et les liens actives en rouge 
sur fond noir (repere ©). 

Exemple 12-14. Les styles des liens 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Styles des 1 iens</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" titl e="l iens"> 
a:link{text-decoration: underl ine;color: navy;}© 
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a:focus{font-size:200%;border: yellow 2px double;}© 

ul li a:hover(font-size: 25px; background-color: red; color: #FFF; 

border: yellow 2px double;)© 
li a:visited{background-color: #DDD; color: #700;}© 
li a : acti ve{background-col or: #red; color: #567;}© 
</style> 
</head> 
<body> 

<hl>Les liens essentiels</hl> 
<ul> 

©<li><a href="http://www. w3.org/TR/xhtmlll/" tabindex="l">XHTML l.K/aX/li> 
©<li><a href="http://www. w3.org/TR/CSS21/" >CSS 2.1</aX/li> 
©<li><a href="http://www.funhtml . com/php5">PHP 5</aX/li> 
</ul> 
</body> 
</html> 



La figure 12-14 presente les effets obtenus. Dans cette page, le lien « XHTML 1.1 » a le 
focus et le lien « CSS 2.1 » est survole par le curseur, mais pas clique. 



Figure 12-14 
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Exercices 



Exercice 1 : Definissez la police Georgia pour un paragraphe et ajouter le nom de la 
police generique correspondante. 

Exercice 2 : Ecrivez le style de facon a ce que les elements <code> et <samp> aient une 
police a espacement fixe. 

Exercice 3 : Creez les styles afin que les titres <hl> soit affiches avec une police Arial de 
24 pixels et que les titres <h2> soient dans une police de la famille serif avec une faille 
de 1,2 em. 
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Exercice 4 : Definissez la taille des titres <hl>, <h2>, <h3> avec des pourcentages decrois- 
sants et une police de la famille sans-serif. La taille fixee pour <hl> doit etre l'equivalent 
de la taille 2 em. 

Exercice 5 : Faites la meme operation que pour l'exercice 4 en utilisant des tailles absolues, 
puis des tailles en pixel. 

Exercice 6 : Creez une classe qui permette d'obtenir un texte plus grand que celui de 
l'element parent. 

Exercice 7 : Definissez explicitement le style qui permet d'obtenir le contenu des 
elements <b> en gras et plus grand que son contexte. 

Exercice 8 : Definissez les styles afin que le contenu de l'element <code> soit dans une 
police a espacement fixe, plus grande et plus grasse que celle de son parent. 

Exercice 9 : Definissez explicitement le style de l'element <i > en italique gras. 

Exercice 10 : Creez les styles de facon a ce que les titres <h3> et la premiere ligne des 
paragraphes apparaissent en petites majuscules. 

Exercice 11 : Definissez les styles pour obtenir l'affichage du contenu des elements 
<code> et <samp> en minuscules et dans une police monospace. 

Exercice 12 : Creez les styles de facon a ce que les elements <h3> soient affiches avec un 
texte clignotant. 

Exercice 13 : Reglez l'interligne des elements <div> a 1,2 fois la valeur normale et celui 
des paragraphes a 80 % (il y a deux possibilites). 

Exercice 14 : Definissez le style du texte de l'element <blockquote> avec la police 
systeme message-box. 

Exercice 15 : Definissez l'alignement des elements <code> a gauche avec un espacement 
de 0,2 em et ceux des elements <h2> au centre. 

Exercice 16 : Creez le style permettant la preservation des espaces dans l'element <bl ock- 
quote>. 

Exercice 17 : Creez les styles pour que les liens vierges soient rouges et en gras, que les 
liens visites soient marrons sur fond gris clair et en graisse normale. Les liens survoles 
doivent apparaitre entoures d'une bordure bleu vif. 



13 



Creer une mise en page : 
le dimensionnement et 
le positionnement 



Les methodes de mise en page au moyen de cadres (telles que nous les avons vues au 
chapitre 8) ou a l'aide de tableaux (chapitre 6), outre qu'elles sont aujourd'hui consi- 
derees comme obsoletes, ne manquent pas de presenter des inconvenients importants. 
Si les cadres genent considerablement l'indexation correcte des pages web, les mises 
en page a base de tableaux, pour pratiques qu'elles aient l'air a premiere vue, impli- 
quent des structures trop complexes qui nuisent a la lisibilite de 1' organisation et a la 
maintenance des sites. Nous allons voir dans ce chapitre que tous ces problemes 
peuvent etre contournes en utilisant conjointement le dimensionnement et le position- 
nement des elements qui contiennent les differentes zones d'une page. Ces methodes 
apportent enfin des reponses simples permettant de creer les mises en page les plus 
diverses, et qui plus est en respectant le principe, fondamental en XHTML, de separa- 
tion du contenu et de la presentation. Nous pouvons par exemple obtenir des presen- 
tations differentes a partir du meme code XHTML en modifiant simplement les styles 
CSS attaches a ces differents composants. 
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Le dimensionnement des elements 

Au chapitre 11, dans la definition du modele de boite de CSS, nous avons vu que les pro- 
prietes width et height permettent de determiner respectivement la largeur et la hauteur 
d'un element. Elles s'appliquent a tous les elements sauf les elements en ligne non remplaces 
et les lignes et groupes de lignes des tableaux. Nous rappelons leurs syntaxes : 

width: <longueur> | NN% | auto | inherit 
| height: <longueur> | M% | auto | inherit 

Si la definition de la largeur ne pose generalement pas de probleme, celle de la hauteur 
peut engendrer des effets particuliers, voire conflictuels entre les boites creees pour les 
elements successifs et leurs contenus. L'exemple 13-1 en est une illustration concrete. Le 
corps du document contient une division <div> (repere ©) qui inclut successivement un 
titre <hl> (repere 0), deux paragraphes <p> (reperes © et ©). Les paragraphes incluent 
pour leur part du texte ordinaire. L'element <div> est suivi d'un second paragraphe ne 
contenant que du texte (repere ©). 

Les definitions de styles fixent les dimensions de l'element <div> qui a une largeur de 
80 % et une hauteur de 500 pixels (repere ©)• Les elements <p> ont une largeur de 75 % 
de celle de leur conteneur (repere ©), soit 75 % de 80 % (done 60 % de la largeur de la 
page) pour le premier et 75 % de la page pour le second. Ces largeurs sont effectivement 
respectees par tous les navigateurs (voir la figure 13-1). De meme, l'element <hl> a une 
largeur reelle de 80 % de celle de son parent <di v>, done 80 % de 80 %, soit 64 % de celle 
de la page. 

Mais e'est au niveau de la definition des hauteurs que se posent les problemes. Nous pou- 
vons remarquer d'emblee que la hauteur de l'element <di v> est superieure a la somme des 
hauteurs de ses elements enfants <p> (200 pixels chacun) et <hl> (50 pixels). Le resultat 
obtenu visible a la figure 13-1 montre tout d'abord que la hauteur definie pour <div> est 
bien respectee. Celles des deux paragraphes sont bien de 200 pixels, la couleur de fond 
qui leur est attribuee nous permettant de le verifier. II en est de meme pour la hauteur de 
l'element <hl>. En revanche, si le texte du premier paragraphe s'affiche bien dans la boite 
assignee a l'element <p>, celui du deuxieme deborde, et pire encore il se superpose au 
contenu du troisieme. Le resultat obtenu est evidemment catastrophique au niveau de la 
presentation. 

Exemple 13-1. Les problemes de dimensionnement en hauteur 

<?xml version="l .0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Dimensionnement des elements</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
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<style type="text/css" > 
body {font-family: Arial sans-serif ;font-size: 16px;} 
di v {width: 80% ;height:500px; background-col or :#EEE;}© 
p{width: 75%; height :200px; background-col or :#BBB;}0 
hlfwidth: 80%; height: 50px;background-color:#888;color:white;}© 
</style> 
</head> 
<body> 
©<div> 

©<hl>Dimensionnement des el ements</hl> 

©<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 

^» et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 

</p> 

©<p>Deus duo magna luminaria luminare maius ut praeesset diei et luminare minus 
>"»• ut praeesset nocti et Stellas et posuit eas in firmamento caeli . . .</p> 
</div> 

©<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas . . . 

</p> 
</body> 
</html> 
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Nous pouvons corriger facilement ce resultat en donnant la valeur auto a la propriete hei ght 
des elements <div> et <p> (reperes O et ©)■ L' element <styl e> devient done : 

1 <style type="text/css" > 

body {font-family: Arial sans-serif ;font-size: 16px;} 
di v { width: 80%; hei ght: auto Q ; background -col or :#EEE; } 
p{ width: 75%; height: auto Q; background- col or :#BBB ; } 
hlfwidth: 80%; height: 50px;background-color:#888;color:white;} 
</style> 

Nous obtenons alors le dimensionnement presente a la figure 13-2, dans lequel chaque 
paragraphe occupe la place qui lui est necessaire pour afficher son contenu. 
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Figure 13-2 

Le dimensionnement avec la valeur auto 



L'utilisation de la valeur auto ne permet pas une raise en page precise des differents ele- 
ments dans le document, en particulier si leur contenu est cree dynamiquement, en prove- 
nance d'une base de donnees, suite a une recherche declenchee par le visiteur par exemple. 
S'il semble necessaire au programmeur de definir imperativement une hauteur a chaque 
element, il est possible de conserver cette presentation en appliquant la propriete overflow 
pour gerer les eventuels debordements des contenus. Sa syntaxe est la suivante : 

overflow : visible | hidden | scroll [ auto | inherit 

Voici le role imparti a chacune de ses valeurs : 

• visible : le contenu debordant est affiche . 
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• hi dden : le contenu debordant est cache et done illisible. 

• scroll : des barres de defilement horizontales et verticales apparaissent sur les cotes 
droit et bas de la boite de 1' element, ce qui permet d'acceder au contenu debordant. 
Cette valeur a 1' inconvenient de laisser apparaitre ces barres meme si le contenu ne 
deborde pas. 

• auto : le navigateur fait apparaitre les barres de defilement en cas de debordement uni- 
quement. 

En modifiant les styles de l'exemple 13-1 de la maniere suivante : 

<style type="text/css" > 

body {font-family: Arial sans-serif ;font-size: 16px;} 
di v { wi dth : 80% ;height:500px; background- col or :#EEE; } 
p{ width: 75%; height: 200px ; ba ckg round-col or :#BBB; overflow: auto;©} 
hllwidth: 80%; height: 50px;background-color:#888;color:white;} 
</style> 

dans laquelle nous definissons la propriete overflow pour les paragraphes avec la valeur 
auto (repere Q)> nous obtenons le resultat presente a la figure 13-3 qui montre que la hau- 
teur definie pour les elements <p> est conservee a 200 pixels, mais que le contenu du 
deuxieme paragraphe est lisible en utilisant les barres de defilement. Les intentions de 
mise en page sont done preservers et le contenu est entierement accessible. 
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Dans les cas precedents, et en gerant les debordements avec la propriete overf 1 ow, tous les 
paragraphes ont les memes dimensions quels que soient leurs contenus. Dans notre der- 
nier exemple, le premier et le second ont une hauteur de 200 pixels alors que le premier 
ne contient que quelques lignes. Pour pouvoir intervenir sur les hauteurs des elements 
sans pour autant les fixer de maniere absolue, nous pouvons definir une hauteur minimale 
et une hauteur maximale pour tous les elements, a l'exception des elements en ligne non 
remplaces et des elements de tableau. 

Nous disposons pour cela des proprietes min-height et max-height dont la syntaxe est la 
suivante : 

min-height: <longueur> | NN% | inherit 
max-height: <longueur> | HU% | none | inherit 

Le parametre <1 ongueur> est donne comme d'habitude par un nombre et une unite, et les 
pourcentages sont donnes en reference a la hauteur du bloc conteneur. La valeur none (qui 
est la valeur par defaut pour la hauteur maximale) indique que la valeur limite est celle du 
bloc conteneur. 

De meme, une largeur minimale et une largeur maximale peuvent etre indiquees pour les 
memes elements a l'aide des proprietes min-width et max-width dont les syntaxes sont 
similaires aux precedentes : 

min-width: <longueur> | Ml ] inherit 
max-width: <longueur> | NN% | none | inherit 

L' exemple 13-2 nous permet d'affiner les mises en pages obtenues dans les exemples pre- 
cedents. L element <di v> se voit affecte une largeur maximale de 900 pixels et une hauteur 
maximale de 800 pixels (repere ©)• Les paragraphes ont une hauteur minimale de 80 pixels 
et maximale de 250 pixels (reperes Q et ©), ainsi qu'une largeur comprise entre 500 et 
600 pixels (reperes Q et 0). Les eventuels debordements sont geres en utilisant la propriete 
overflow (repere @). L' element <hl> a pour sa part une largeur comprise entre 400 et 
500 pixels au maximum (reperes Q et ©). Comme nous pouvons le constater sur la 
figure 13-4, le contenu du titre <hl> est affiche sur deux lignes car sa largeur est limitee a 
400 pixels. Le premier element <p> (repere Q) occupe juste la hauteur necessaire a son 
contenu limite a quatre lignes. En revanche, le deuxieme (repere ©) a un contenu beau- 
coup plus long et il apparait avec une hauteur de 250 pixels, ce qui est sa limite superieure, 
et, comme son contenu deborde, des barres de defilement apparaissent automatiquement. 
Quant au troisieme paragraphe (repere ©), il a le meme comportement que le premier et 
sa hauteur est exactement adaptee a son contenu en respectant les contraintes de hauteur. 

Exemple 13-2. Largeurs et hauteurs minimales et maximales 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Dimensionnement des elements</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
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<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" > 
body {font-family: Arial sans-serif ;font-size: 16px;} 
di v(max-width :900px; max- height :800px; background- col or: #EEE; O 
p(min-height:80px Q; max-height:250px ©; min-width:500px Q; 

max-width:600px 0; background-color:#BBB;overflow: auto©;) 
hl{min-width: 400px Q; max-width: 500px 0; background-color:#888;color:white;} 
</style> 
</head> 
<body> 
<div> 

<hl>Dimensions mini et maxi des elements XHTML</hl> 

©<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
. . . </p> 

©<p>Deus duo magna luminaria luminare maius ut praeesset di ei et luminare minus 
ut praeesset nocti et Stellas et posuit eas in firmamento caeli ut lucerent 
super terram et praeessent diei ac nocti et dividerent. . . </p> 

</div> 

®<p> In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux et vidit Deus lucem quod . . .</p> 
</body> 
</html> 
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Le rendu des elements 

Dans la premiere partie de cet ouvrage, nous avons passe en revue 1' ensemble des ele- 
ments XHTML et nous avons vu que chacun d'eux est associe par defaut a une presenta- 
tion specifique (a l'aide d'une feuille de style par defaut incluse dans les navigateurs : 
voir 1' annexe B). Tous les elements peuvent done etre classes en grands groupes de mise 
en page comme les blocs, les elements en ligne, les listes ou les tableaux avec les carac- 
teristiques qui s'y rattachent. Pour chaque element, nous pouvons intervenir sur l'appar- 
tenance a un de ces groupes et modifier le rendu d'un element en fonction des besoins. 
Un element <hl> peut par exemple etre transforme en element en ligne ou en element de 
liste alors qu'il est par defaut de niveau bloc. 

Ces modifications sont operees au moyen de la propriete display dont la syntaxe est la 
suivante : 

I display : none |inline | block | list-item |table [ inline-table | table-row-group | 
table-header-group | table-footer-group | table-row | table-column-group | table- 
| column | table-cell | table-caption | inherit 

Sa valeur par defaut est inl ine mais la feuille de style par defaut la modifie et donne a 
chaque element le style que nous lui connaissons. Ce sont ces valeurs par defaut sur les- 
quelles nous intervenons. Les principales valeurs qu'elle peut prendre ont la signification 
suivante : 

• none : l'element n'est pas affiche et la boite qui lui est associee n'est pas creee. Tout se 
passe comme s'il n'existait pas dans le code XHTML. 

• inline: l'element devient du type en ligne (comme <span> par exemple). 

• block : l'element devient du type bloc (comme <hl>, <p>, <div>...). 

• 1 i st-i tem : l'element devient du type liste (equivalent de <1 i >). 

Les autres valeurs sont rarement utilisees en XHTML, mais plutot reservees a la creation 
de styles destines a des documents XML pour induire des comportements identiques a 
ceux des elements de tableau XHTML. Le tableau suivant donne les correspondances 
entre les valeurs de la propriete di spl ay et l'element XHTML dont le comportement est 
induit par celles-ci. 



Tableau 13-1. Correspondances entre les valeurs 
de la propriete display et les elements XHTML 



Valeur 


Element 


Valeur 


Element 


table 


<table> 


table-row-group 


<tbody> 


table-header-group 


<thead> 


table-footer-group 


<tfoot> 


table-row 


<tr> 


table-column-group 


<colgroup> 


table-column 


<col /> 


table-cell 


<td> ou <th> 


table-caption 


<caption> 


inline-table 


<table> dont la propriete display vaut inline 
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L'exemple 13-3 offre une illustration de la propriete di spl ay. La page comprend un para- 
graphe <p> qui inclut quatre elements <span> (repere ©). Ces elements, qui sont normale- 
ment de type en ligne, sont affiches sous forme de liste en donnant la valeur 1 ist-item a 
la propriete display (repere ©). La page contient egalement une liste non ordonnee 
(repere 0). En donnant la valeur inline a di spl ay pour les elements <1 i > (repere ©), ils 
constituent un menu sur une seule ligne. La page contient enfin une division (repere ©) 
incluant une image (repere 0), deux litres <hl> (reperes et 0) et un paragraphe (repere ©). 
Pour ces derniers, la propriete display prend la valeur inline. Le contenu des titres est 
done affiche comme du texte en ligne dans le paragraphe. Quant a 1' image incluse dans 
<div>, le gestionnaire d'evenements oncl ick permet de la faire disparaitre quand le visiteur 
clique sur la division en donnant a l'aide de code JavaScript la valeur none a la propriete 
di spl ay (repere 0) ; en gerant l'evenement ondbl cl i ck, un double -clic la fait reapparaitre 
en lui octroy ant la valeur inline (repere 0). 

Exemple 13-3. Modification du rendu des elements 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Rendu des el ements</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" > 

body,hl,p{font-size: 24px;} 

spanfdisplay: list-item; }0 

li{display: inl ine;border: solid lpx black;)© 

hl.pldisplay: inline;}© 
</style> 
</head> 
<body> 

©<p><span> XHTML </span> <span> CSS2 </span> <span> JavaScript </span> 

<span> PHP 5 </span> </p> 
©<ul> 

<li><a href="l 1enl.html" ></a>. .XHTML 1.1.. </li> 
<li><a href="lien2.html" ></a>..CSS 2.1.. </li> 
<li><a href="l ien3.html " ></a>. .JavaScript. . </li> 
<li><a href="lien4.html" ></a>. . PHP 5.. </li> 
</ul> 

©<div id="division" 

^» ©oncl ick="document .get El ementByldt 'couv ' ) .styl e.displ ay='none' " 

©ondbl cl ick= "document .get El ementById( 'couv ' ) .styl e.displ ay='inl ine' " > 
0<img id="couv" src="couvxhtml_gd. jpg" alt="XHTML CSS" height="130" 
width="107" /> Les langages du Web : 
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©<hl>XHTML </hl> 
©<hl> CSS 2.1 : </hl> 

©<p> In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit 
lucem ac tenebras appellavitque lucem diem et tenebras noctem factumque est 
vespere et mane dies unus dixit quoque Deus fiat firmamentum in medio aquarum 
et dividat aquas ab aquis et fecit </p> 
</div> 
</body> 
</html> 



La figure 13-5 montre le resultat obtenu avant la disparition de l'image. 



Figure 13-5 

Les modifications 
du rendu normal 
des elements 
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^^Bl,« latieaees du Web : XIITMI. CSS 2.1 : In principio creavit Deus caelum et terrain terra 
autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Dens fiat lux et facta est lux et virlit Deus lucem quod esset bona et divisit lucem ac tenebras |^ 
appellavitque lucem diem et tenebras noctem factumque est vespere et mane dies unus dixit quoque Deus 
fiat firmamentum in medio aquarum et div idat aquas ab aquis et fecit 



Le positionnement des elements 

Le principe du positionnement permet de definir 1' emplacement des boites generees pour 
chaque element XHTML present dans le code de la page. II existe plusieurs schemas de 
positionnement en CSS 2. 1 . 

Le positionnement selon le flux normal : il inclut le positionnement par defaut opere par 
les navigateurs sans definition de styles particuliers. Avec ce positionnement, les ele- 
ments <p>, <div> ou <hl>, par exemple, sont associes a une boite de bloc, et les elements 
<img /> ou <span> a une boite en ligne. II inclut egalement le positionnement relatif des 
elements de type bloc ou en ligne. 

Le positionnement flottant : dans ce cas, la boite de 1' element est generee comme dans le 
flux normal. Elle conserve pour exemple les dimensions qui lui ont ete attributes, soit par 
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ses attributs, soit par les proprietes width et height. En revanche, cette boite est deplacee 
afin d'etre positionnee le plus haut et le plus a gauche possible dans le contenu. 

Le positionnement absolu : avec ce type de positionnement, le bloc genere par 1' element 
devient completement independant du flux normal. Sa position est en particulier sans 
aucun rapport avec son ordre d' apparition dans le code XHTML. Des proprietes particulie- 
res doivent etre definies pour placer la boite de l'element par rapport a son contenu, qu'il 
s'agisse de <body> ou d'un autre element. 

Le positionnement fixe : dans ce cas, un element occupe une position fixe dans la fenetre 
du navigateur et ne defile pas avec le reste de la page. 

Le flottement 

Le concept du modele de boites vu au chapitre 11 suppose que les blocs apparaissent 
dans la page les uns a la suite des autres, de haut en bas, selon leur ordre d'apparition 
dans le code XHTML. De meme, un element remplace, comme une image incluse dans 
un paragraphe au milieu d'un texte par exemple, est affiche comme un sous-bloc en pro- 
voquant un retour a la ligne avant et apres l'image. Si sa largeur est inferieure a celle du 
paragraphe, cela entraine l'apparition d'une zone blanche a sa droite, car elle est alignee 
a gauche par defaut. Cela cree un effet evidemment disgracieux dans la page. II en est de 
meme pour un element de bloc, par exemple un tableau dont la largeur est faible par 
rapport a celle de son conteneur. 

Pour ameliorer cet etat de fait, nous pouvons rendre n'importe quel element flottant. 
Quand un element est declare flottant, le contenu des autres elements voisins se dispose 
autour de lui comme l'eau s'ecoule autour d'un rocher place au milieu d'une riviere. 
Lespace laisse libre autour de cet element est comble, creant ainsi une meilleure occupation 
de la surface de la page. 

Quand un element est declare flottant, la boite qui correspond a l'element est deplacee 
vers la gauche ou la droite de son conteneur selon la valeur choisie pour le flottement. 
Lalignement vertical est tel que la boite est deplacee sur le haut de la ligne qui contient 
l'element, ou sur le bas du bloc qui le precede. On precede a la definition du flottement 
d'un element au moyen de la propriete float qui peut s'appliquer a tous les elements 
XHTML et dont la syntaxe est la suivante : 

float: left | right | none | inherit 

Les valeurs qu'elle peut prendre ont la signification suivante : 

• 1 ef t : la boite de l'element est deplacee en haut et a gauche de son conteneur ; 

• ri ght : la boite de l'element est deplacee en haut et a droite ; 

• none : la boite ne flotte pas (c'est la valeur par defaut) ; 



• i nheri t : la boite herite du comportement de son element parent (ce qui n'est pas le cas 
par defaut). 
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Pour qu'un element soit flottant, il est necessaire qu'il soit dimensionne explicitement 
avec la propriete width, ou implicitement par ses dimensions intrinseques (celles d'une 
image par exemple), ou par ses attributs width et height dans le cas d'un element <img /> 
ou <object>. Dans le cas contraire, le navigateur risque de l'afficlier avec une largeur 
minimale, si ce n'est nulle. 

Si un element flottant possede des marges, ces dernieres ne fusionnent pas avec celles des 
elements voisins, mais elles s'ajoutent a celles-ci. Quand plusieurs elements sont flot- 
tants du meme cote, celui qui apparait en seconde position dans le code peut etre amenee 
a butter sur le bord droit ou gauche du premier selon que la propriete f 1 oat a respecti- 
vement la valeur left ou right. 

Dans l'exemple 13-4, la page contient un element <div> (repere ©) qui inclut du texte 
brut puis une image (repere 0), a nouveau du texte puis un paragraphe (repere ©). La 
division a une couleur de fond, des marges de 15 pixels et un alignement justifie (repere ©). 
L' image est positionnee flottante a gauche et a des marges de 20 pixels. Le paragraphe est 
flottant a droite, dimensionne avec une largeur de 200 pixels, et est muni d'une bordure 
qui permet de bien le distinguer du reste du texte. La figure 13-6 montre le resultat 
obtenu. Nous y constatons que les elements flottants n'apparaissent que relativement a 
l'ordre dans lequel ils sont ecrits dans le code XHTML. Par exemple, l'image n' apparait 
qu'une fois que la ligne dans laquelle l'element <img /> est situe a ete completee par du 
texte qui se situe apres cet element. 



Exemple 13-4. Les elements flottants 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<title>Les elements f 1 ottants</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" > 

div{background-color: #EEE; margin: 15px;text-align: justify;}© 
img{float:left;margin:20px;}@ 

p.droit{float: right;border:2px solid red;width: 200px;margin:10px; 
padding: 10px;}© 
</style> 
</head> 
<body> 

©<div>XHTML ET CSS : In principio creavit Deus caelum et terram terra autem erat 
inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas dixitque Deus fiat lux et facta est lux et vidit Deus 
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0<img src="couvxhtml_gd. jpg" al t="XHTML CSS" /> 

lucem quod esset bona et divisit lucem ac tenebras appellavitque lucem diem et 
tenebras noctem factumque est vespere et mane dies unus dixit quoque Deus fiat 
firmamentum . . . 

©<p cl ass="droit">Le W3C <br />aquas quae erant sub f i rmamento ab his quae erant 
super firmamentum et factum est ita vocavitque Deus firmamentum caelum et 
factum est vespere et mane dies secundus dixit vero Deus congregentur aquae 
quae sub caelo sunt in locum unum et appareat </p> 
in firmamento caeli et inluminent terram et factum est ita fecitque Deus duo 
magna luminaria luminare maius ut praeesset diei et luminare minus . . . 
</div> 
</body> 
</html> 
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XHTML ET CSS : Iu pnrLcipio creavit Deus caelum et terram terra auteuj erat inanis et vacua et tenebrae super facieni abyssa et spaiEus Dei ferebaEur super aquas daxitque Deus tiaE hit et facta est 
tux et vjdit Deus hiceni quod esset bona et divisit hicem ac tenebras appellavitque. luceni diem et tenebras noctem factumque est vespere et inane dies unus. dixit quoque Deus fiat fimiamenEiun in 
medio aquamni f. dKidat aquas ab aquis et fecit Deus nn i : ante u ruin diusitque andam terrani c on ere g alio nes que aquarian appt3nc.it maria et ■■icLt Deus 
quod esset bouum et ait genninet terra berbam virentem et facientem semen et Lcuum pomHenm faciens fructurn iuxta genus suum cuius senieu in semeE ipso 
sit super terram et factum est: ita et protulit terra berbam virentem et a-dfereutem semen junta genus suum lignumque faciens Eructuin et bafcens umimquodque 
semenEem secundum speciem suaiu et vidit Deus quod esset bonum factumque est ^spere et mane dies teruus dixit autem Deus riant tuniiuaiia in 
firmameLito c aeli ut drudaiat diem ac uoctein et sint in signa et Eempora et die e et annos ut Juceant ui firmamento caeli et iuhirninent terram et factum est ita 
fecitque Deus duo magna tuminaria luminare marus ut praeess et diei et luminare minus ut praeesset uocti et Stellas et 
posuit eas in firmamento caeli ut tucerent super terram eE praeessent diei ac uocti et dhiderent tucem ac tenebras et 
vidit Deus quod esset bonum et factum est vespere et mane dies quartus dixit eu'am Deus proctucant aquae reptile 
aauarrae -<>i\ nitii et volatile supn LciiaErj sub tniErainemci caeli cieavitque Deus cete giaudia. Ill pioicipio tic ac.il Deus 
caelum et teriam Lnia aulem erat Buuiii eL vaoi et leuetaae supn faciem abyisi et spiiiLui Deifnebalui super 
aquas dixiLque Deus fiat Lu\ eL facta est lux eL vidit. D;u; hiueiri quod esset bona et dnisiE lucem ac Eenebias 
j,ppe J-v- uque Lucem diem et Leuebras nucEem EacLumque est tti piinqpic creacii Deus caelum et leiiam Lena autem 
eiuL inuiiiii el '. jith et leuebiae super faciem ubyiii eL ^piiLu; Dei fnebaun super aquas dLutque Deus fiat lux et 
fiicEa esL Iua et vjurl Deuv tucem quud esseL buna el i&isit hit em ac tenebius uppelk^itque lucent diem eL tenebius 
nuctem laLtuinque est veSpere et nuuie dieb umis dLut uucque Deus fiat IsniaiueuLuiu in medic uquaium et thSidaL 
aquas all aquu eL fecit Deus ismLimeELtuui di-isiEqu; jquu- quae erant sub firmameino ab Ids quae eiuail iupn famaiELeiilum el factum est iLa vuca^itque Deus 
EiimameiiLuin raelum el fartum ebt vespere eL inane dies secundus dLut veto Deus conn e^esitui aquae quae sub caelu sunL in it' cum unum et appaieat aiida 
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Figure 13-6 

Le flottement des elements 



L'exemple suivant permet d'apprehender les subtilites du positionnement flottant dans 
des cas particuliers. L' element <div> (repere ©) inclus dans la page contient maintenant 
trois images incorporees au milieu d'un texte (reperes O, © et ©). Vient ensuite un para- 
graphe ne contenant que du texte (repere ©> Les deux premieres images sont rlottantes a 
gauche (repere ©), et la troisieme a droite en utilisant la classe img. droit (repere ©). 
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Seule la deuxieme image est dimensionnee explicitement avec ses attributs height et 
width, les autres ayant les dimensions originates de l'image. 

Exemple 13-5. Cas particuliers de flottement 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les elements f 1 ottants</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" > 

div{background-color: #EEE;} 

img{float:left;margin:20px;}© 

img.droitffloat: right;}© 

pfbackground-color: #DD2 ; } 
</style> 
</head> 
<body> 

®<div>XHTML ET CSS : In principio creavit Deus caelum et terram terra autem erat 
inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas dixitque Deus fiat lux et facta est lux et vidit Deus 
0<img src="couvxhtml_gd. jpg" alt="XHTML CSS" /> 

lucem quod esset bona et divisit lucem ac tenebras appellavitque lucem diem et 
tenebras noctem factumque est vespere et mane dies unus dixit quoque Deus 
fiat . . . 

©<img src="couvxhtml_gd.jpg" al t=" XHTML CSS" height="130" width="107" /> 
herbam virentem et adferentem semen iuxta genus suum lignumque faciens fructum et 

habens unumquodque sementem secundum speciem suam et vidit Deus . . . 
©<img cl ass="droit" src="couvxhtml_gd. jpg" alt="XHTML CSS" />ut praeesset nocti 

et Stellas et posuit eas in firmamento caeli ut lucerent super terram et 
^» praeessent diei ac nocti et dividerent lucem ac tenebras et vidit Deus . . . 
</div> 

©<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux et vidit Deus . . . </p> 
</body> 
</html> 



On peut le verifier a la figure 13-7, la premiere image est positionnee comme dans 
1' exemple precedent, et la deuxieme flottante a gauche vient se positionner le plus a gau- 
che possible, selon les principes enonces plus haut. Mais comme l'espace est occupe par 
la premiere, elle vient se placer contre le bord droit de cette derniere, et non plus sur le 
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bord gauche de son conteneur. Nous pouvons remarquer a cette occasion que les marges 
de chacune des images sont conservees et ne fusionnent pas. Le cas de la troisieme image 
flottante a droite est le plus particulier. En effet, l'element <di v> ne pouvant la contenir en 
entier, elle deborde et empiete sur le paragraphe qui suit et se comporte comme si elle 
etait flottante dans ce paragraphe, le texte de ce dernier l'entourant. 



L« demerits fkttants - Mozilla 
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XHTML ET CSS : In principle crea^.t Deus caelum et terrain terra autem erat Lnauii et vacua et teuebrae super tadem abyssi et spiritus Deiferebatur super aquas dixitque Deus Jiat lux facta est 
tax et vi-dic Deus tacem quod esset bona et druEir tacem ac tenebras appeLlav.tque tucem diem et tenebras noctemtVtunicjuc est vespere et mane dies unus dixit quoque Dens fiat arniameutum in 
medio aquarum et cbvdat aquas ab aquis et fecit Den; Jinn amen turn dhrsitqiie Le W?C aquas quae erant sub firmamento ab liis quae eranC super 

et factum est Lta voc ar.it que Deus firmamentuni caelum et factum est vespere etnwne dies secundus dixit vero Deus conEreEjentur aquae 
quae sub caelo sunt in locum unuiu et appareat aridani terram congregationesque aquarum appeLlavLt maria et ■ idit Deus quod esset bonum et ait 
£ eruanet terra herbam vreotem et J/acieutem semen et lignum poniiferum faciens fructuni taxta genus suum cunts, semen in s emet ipso sit super terram et 
factum est ita et protufcit terra herliani -irentem et adferentent semen ni\ta g enus suum Jigniunque faciens fructum et havens ununiqiiodqu.e sementem 
secundum speciem suam et vidsr Deus quod esset bcimm tactumque est vespere et mane dies tertius dixit autem Deus tiant 
taniinaria in firmamento caeli ut dbidant diem ac nocten; et skit in siaia et tempera et dies et anncs ut ruceaut in firmamejito c aeli 
et inJnmineEit terram et ['actum est ita t'ecitque Deus duo magna tuiiiinaria iununaie maius ut praecsset diei et tuminare niinus ut 
praees :.: ."j eL Hellas elpusuit eat at tiriBtaineiiLti caeli ut luceieuL super ten am et 
placement diei ac nucti eL dUidnenL ac Cenebias et ■ Dent quod esset 
bcnuiu eLL'acLicu esL vespere et inane die; quartus dixit eu'ant Deus pEuducanl aquae 
Eeptiie aniukae ^rvemii el culautc super Leiiam sub lEiitusuenLu caeli cieasnque: Deus 
cete a undia m piincipiu acai.it Dcu; caelum et Leiiusn Lnia uulein er at iiiunis eL 
^acua et Eenrbiue supei faciem abyiii et spinus Dei feiebatur supei aquas dLuLque 
Deus Sal -j.'. et facta esL tax eL vidit Deus Luceni quud esset buna et urasn tucem ac Lenebtus appellavilqiie 
tucem diem el tenebias est ^ 

1l prsKqiid a eavn Deus caetuiu eL teri am ten a mncm ei aL stanis et •• acua eL tcneta ae super lacierji abyssi eL spcilus Dei ferebaLui super aquas di\itque 
Deus JiaL Lus eL facta est Iua el vidiL Deus luc em quud es s eL bona eL di-isit lucent ac Lenecras appeHaiiturie Luceni diem et Lenetnas [icLteiri lactumque esL 
^ espeie eL inaue dies unus <k\L\ quuque Deus fiat liniainentuiu in cuecbu aquaiuin eL di^idaL aquas ab aquis et iecit Deus finiiaEiieiiLuiu diMsiLque aquas 
quae eranl sub lamameLilu ab ids quae eiai:L supn DrEuaiiinLtum el I'acLuiLi est Aa vuca^itujue Deus fainameuLuiiL caelum et iactuin est ^ espeie el marie 
dies secundus duit ^ciu Deus ccna e^eiiLu: aquae quae sub caelc sunt in luc uui unuiu d appareat jo id a JacLuinque esL ila eL ^.dcaiiL Deus aiidain Leiiain 
ccoip eguliunesque uquiaum appelir.il unaia eL ■-idil Deus quud esseL buELum el ail jteinaiel tena Lerbam ^oeuLem eL lacieuLem semen etUvrjum 
p ui niter urn fact: el; tructum ni\ta genu; ;uutu ohus snEieuin seinetipsu sit supn Lcnaiu eL t'acLum est iLa et pEutulit Lena herbaria ■■cn-Letti eL adferenLeEU 

semen iu.\la gemis suuiel liumnnque Jacietb JiucCuul et Jiabeus umsELquudque semei.lem secundum speciem ;uaiu eL ^idil Deus tniud eisel bunum 3 ucHnnque esL ^ espei e eL suaue dies tertius ctuL 
autnu Deus mail luuai:a:ij in liiiinaEienLu cueli uL di'. idaiLt dteiu ac elucLcsel eL ;ii:L in sisnra el CenEpoi a eL dies eL anncs ut LuceanL in JjiEuan:eiLtc> caett et aJianmetH leiiam el facLuiu esL ila feciLque 
Dru'. LttM m.iyjiii hBiinum;] tinnin.n- rnimi'. nil jn.irr'.-.rE tkn rt lm:ici.irr iriirn ■■■ ul |ir.irr-.--pE nut'Ei rl ^IrtLt^ rl jmimdE r;i: bi imibiiiinihi i nrii id kn'ririil 'iijifi Vn.in: rl Tn:ierv,rnt <lin ;u~ iuiL _ ts rl 
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Figure 13-7 

Cas particuliers de flottement 



Empecher le flottement 

Nous pouvons empecher le type de comportement de la troisieme image qui flotte sur le 
paragraphe <p> en appliquant pour ce dernier la propriete clear. Ce precede n'est possible 
que pour les elements de bloc, mais il permet d'eviter le flottement d'un element sur la gau- 
che ou la droite de celui pour lequel la propriete est definie. Ainsi, l'image a la place 
necessaire a son affichage et le texte du paragraphe est repousse vers le bas, laissant 
apparaitre un espace vide. Cela peut constituer un choix de presentation dans certains 
cas, mais la solution precedente est en l'occurrence plus compacte. Voici la syntaxe de la 
propriete clear : 



clear: none | left | right | both | inherit 
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Les valeurs qu'elle peut prendre ont pour signification : 

• none : le flottement est autorise ; 

• 1 ef t : le flottement d'un element sur la gauche est interdit ; 

• ri ght : le flottement d'un element sur la droite est interdit ; 

• both : le flottement d'un element est interdit a gauche et a droite. 

En conservant le code XHTML de l'exemple 13-5 et en modifiant seulement les styles de 
la maniere suivante (repere Q) : 

j <style type="text/css" > 
divfbackground-color: #EEE;} 
img{float:left;margin:20px;} 
img.droit{float: right;} 
p{ background -col or: #DD2; clear: right; )0 
</style> 

dans laquelle la propriete clear est definie avec la valeur right pour l'element <p>, nous 
obtenons le resultat presente a la figure 13-8 qui montre que la troisieme image ne flotte 
plus sur le paragraphe. 



fr : Let M^fTwnti fkttants - Mozill. 
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Figure 13-8 

Suppression du flottement sur le cote d'un element 
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Le positionnement relatif 

Dans le positionnement relatif, les navigateurs analysent un document et determinent un 
emplacement pour chacun des elements comme dans le flux normal, puis deplacent ceux 
qui ont un positionnement relatif par rapport a la position qu'ils auraient dfi occuper, 
mais en ne deplacant pas les autres elements. En consequence, l'emplacement initial 
reste vide et il en resulte des chevauchements. 

En positionnement relatif, l'ordre d'ecriture des elements est important car il conditionne 
l'emplacement de chaque element (avant le deplacement relatif) et l'ordre de superpo- 
sition en cas de chevauchement des boites ; la derniere ecrite dans le code se superpose a 
celle de 1' element ecrit avant. 

Le positionnement relatif est specifie au moyen de la propriete position, munie de la 
valeur rel ati ve. Prise isolement, cette propriete n'a aucun effet. II faut ensuite preciser le 
decalage voulu au moyen des proprietes left, top, right, bottom, dont les significations 
sont les suivantes : 

• 1 ef t : decale l'element vers la droite (si sa valeur est positive) ou vers la gauche (si sa 
valeur est negative) ; 

• top : decale l'element vers le bas (si sa valeur est positive) ou vers le haut (si sa valeur 
est negative) ; 

• ri ght : decale l'element vers la gauche (si sa valeur est positive) ou vers la droite (si sa 
valeur est negative) ; 

• bottom : decale l'element vers le haut (si sa valeur est positive) ou vers le bas (si sa 
valeur est negative). 

Les quatre proprietes 1 eft, top, right, bottom ont la meme syntaxe. Par exemple : 
left: <longueur> | HH% | auto [ inherit 

Le parametre <longueur> est donne comme a l'habitude par un nombre et une unite ; les 
pourcentages se referent aux dimensions du bloc conteneur. Avec le mot-cle auto, la valeur 
de la propriete est calculee en fonction de la valeur de celle qui lui est complementaire (les 
couples 1 eft/ ri ght et top/bottom sont complementaires) de la maniere suivante : 

• Si les deux proprietes complementaires ont la valeur auto, leur valeur calculee est 0. 

• Si l'une vaut auto et que l'autre a une valeur numerique explicite, la premiere prend la 
valeur opposee a celle de la seconde. 

• Si les deux proprietes complementaires sont definies avec des valeurs numeriques 
(done differentes de auto) et que ces deux valeurs ne sont pas opposees, la valeur qui 
1'emporte depend du sens de lecture du texte definie par l'attribut dir. S'il vaut ltr, 
e'est la propriete 1 eft qui 1'emporte, et right prend la valeur opposee ; sinon, quand il 
vaut rtl, e'est right qui 1'emporte. 

L exemple 13-6 illustre le positionnement relatif. L'element <div> (repere 0) inclut 
un paragraphe qui contient du texte brut, puis trois images (reperes © © et ©) dans un 
ordre donne. Si aucun de ces elements n'est positionne, nous obtenons le resultat habituel 
presente a la figure 13-9. Si nous positionnons chacune de ces images en leur appliquant 
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respectivement les classes img.un, img.deux et img.trois, nous obtenons les emplacements 
relatifs suivants : 

• image 1 : emplacement de 30 pixels vers le bas (top vaut 30 px) et de 40 pixels vers la 
droite (1 eft vaut 40 px) (repere Q) ; 

• image 2 : deplacement de 50 pixels vers le haut (top a une valeur negative de - 50 px) 
et de 40 pixels vers la gauche (1 eft a une valeur negative de - 40 px) (repere ©) ; 

• image 3 : deplacement de 80 pixels vers le haut (top a une valeur negative de - 80 px) 
et de 40 pixels vers la droite (1 eft vaut 40 px) (repere ©). 

Le paragraphe est quant a lui deplace de 20 pixels vers le bas (bottom a une valeur nega- 
tive de - 20 px equivalente au style top: 20 px) et de 6 % de la largeur de son conteneur 
(1' element <div>) vers la droite. Notons ici que les valeurs negatives de pourcentage ne 
fonctionnent pas. 

Exemple 13-6. Le positionnement relatif 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title> Positionnement rel atif</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" > 

div{background-color: #EEE;} 

img{margin:20px; } 

img. un {posi ti on: relative; top :30px;left:40px;}© 
img.deux{position:relative; top:-50px; left:-40px;}© 
img.trois{position:relative; top:-80px; left:40px;}© 
p{background-color: #DD2;position:relative; bottom: -20px; left: 6% ;}© 
</style> 
</head> 
<body> 
0<div> 

©<p><big>XHTML </big>: In principio creavit Deus caelum et terram terra autem 
erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur 
super aquas dixitque Deus fiat lux et facta est lux et . . . </p> 
©<img src="couvxhtml_gd. jpg" alt="XHTML CSS" class="un"/> 
©<img src="couvxhtml_gd.jpg" al t="XHTML CSS" height="130" width="107" 
cl ass="deux"/> 

0<img class="trois" src="couvxhtml_gd. jpg" alt="XHTML CSS" /> 
</div> 
</body> 
</html> 

La figure 13-10 donne le resultat obtenu apres le positionnement relatif. Nous constatons 
que les elements deplaces relativement a leur position dans le flux normal peuvent se 
superposer aux autres elements voisins, la deuxieme image etant placee au dessus de la 
premiere et la troisieme se superposant au texte du paragraphe. 
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Figure 13-9 

La page sans positionnement 
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Le positionnement absolu 

Dans le positionnement absolu, qui peut s'appliquer a tous les elements, la boite creee 
pour l'element concerne n'apparait plus dans le flux normal du document. Autrement dit, 
si un bloc <div> est positionne de maniere absolue, il peut etre ecrit n'importe oil dans le 
document XHTML sans que cela ne modifie la position qui va lui etre assignee avec un 
style CSS. Le positionnement d'un element est effectue par rapport au bloc de son conte- 
neur (il s'agit souvent de l'element <body> mais pas necessairement). Chaque bloc d'un 
element positionne de maniere absolue devient a son tour le conteneur de ses elements 
enfants. Si ces elements sont eux-memes en position absolue, ils le sont par rapport a leur 
bloc parent direct et non par rapport au bloc qui contient leur parent. Nous pouvons done 
creer des blocs <div> et les positionner, puis ecrire normalement leur contenu. 

L'independance de la position par rapport au flux normal fait que deux elements en posi- 
tion absolue peuvent occuper la meme zone dans leur bloc parent commun. Dans ce cas, 
aucun d'eux ne repousse l'autre comme il en va pour les elements flottants. Le bloc d'un 
element peut alors recouvrir l'autre en fonction de leur ordre d'empilement (voir la pro- 
priete z-index). Cette propriete peut alors etre utilisee pour creer des effets dynamiques 
d' apparition et de disparition geres par des scripts JavaScript. 

Comme le positionnement relatif, le positionnement absolu est defini en utilisant encore 
la propriete position, mais en lui donnant cette fois la valeur absolute (ou fixed sur 
laquelle nous reviendrons par la suite). II faut ensuite definir la position de l'element par 
rapport a son conteneur a l'aide des proprietes left, top, right, bottom, qui definissent la 
position des bords de l'element respectivement par rapport aux bords gauche, haut, droit 
et bas du conteneur. Nous ne definissons generalement que deux de ces proprietes, le plus 
souvent left et top (les proprietes symetriques right et bottom prenant une valeur oppo- 
see), et la boite de l'element doit etre dimensionnee avec les proprietes width et height. 
L' utilisation conjointe des proprietes position et float est impossible, et si e'est le cas la 
propriete f 1 oat prend automatiquement la valeur none. 

Dans les exemples suivants, nous allons etudier divers cas de mise en page correspondant 
a des types de presentation couramment rencontres sur le Web. 

Le premier cas presente dans l'exemple 13-7 consiste a diviser la page en deux zones 
horizontales. La zone superieure est un bandeau contenant le titre du site et un menu 
compose de liens vers les differentes pages. Pour permettre une navigation aisee, toutes 
les pages contiennent ce meme bandeau dont il suffit de copier le code et les styles qui lui 
sont associes dans chacune des pages. II est contenu dans un element <div> muni d'un 
attribut i d (repere 0) et il inclut un titre <hl> (repere ©) et le menu cree par une liste non 
ordonnee <ul > (repere © ) dont chaque item contient un lien vers les differentes pages. 

Ce premier element <div> est positionne de maniere absolue en haut et a gauche de la 
page en definissant les proprietes top et 1 eft avec la valeur 0. II est dimensionne a 100 % 
en largeur et a 110 pixels en hauteur (repere ©). La propriete displ ay appliquee a l'ele- 
ment <1 i > permet d'obtenir le menu des liens en ligne sous forme horizontale (repere ©). 
Les items sont, de plus, munis de bordures pour en ameliorer 1' aspect. 
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La zone de contenu est egalement incluse dans un second element <div> qui contient un 
titre <hl>, un paragraphe <p> et une image (repere ©), ces elements n'etant pas position- 
nes. Comme la premiere, cette zone est dimensionnee a 100 % de la largeur de la page et 
positionnee de maniere absolue en etant placee a 1 10 pixels du bord superieur de la page 
(correspondant a la hauteur du bandeau) et collee a son bord gauche en mettant la propriete 
1 eft a la valeur (repere ©). 

Exemple 13-7. Positionnement en deux blocs horizontaux 

<head> 

<title> La reference des elements XHTML 1.1 </title> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css"> 

body{font-size: 18px;} 

hl{font-size: 2em;margin-top: 5px;} 

div#menu {position: absolute ; wi dth : 100% ; height: HOpx; left:0px; top:0; 

background-color:rgb(255,102,5) ;color:white; :Q 
div#corps { position: absolute ;width:100ft; left:0; top:110px;background-color: 

#EEE;color:black;}© 
li (display:inline; border: solid lpx white;padding: lOpx 10px;}@ 
img {float:right;}© 
altext-decoration: none;color: white;} 
</style> 
</head> 
<body> 

<di v id="menu">© 
<hl>   Reference XHTML 1.1 </hl>© 
<ul>© 

<li> <a href="pagel . html " tabindex="l" accesskey="A" 
^» title="Structure">Structure</a> </li> 

<li> <a href="page2.html " tabindex="2" accesskey="B" title="Texte">Texte</a> 
</li> 

<!-- Suite de la liste --> 
</ul> 
</div> 

<div id="corps">© 
<hl>La declaration < ! DOCTYPE&gt ; </hl> 
<img src="couvxhtml_gd. jpg" al t="XHTML CSS" /> 

<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divis 
. . . </p> 
</div> 
</body> 
</html> 
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La figure 13-11 montre le resultat obtenu. 
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Figure 13-11 

Le positionnement en deux blocs horizontaux 



Nous pouvons egalement envisager une variante de ce premier cas qui va nous montrer 
que nous pouvons positionner des elements de maniere absolue a l'interieur d'un element 
lui-meme positionne de cette facon. Nous realisons cette operation a l'interieur du 
second element <div> de l'exemple 13-7 en conservant integralement son code XHTML. 

Pour positionner les elements enfants du second element <div>, nous pouvons par exemple 
modifier simplement les styles CSS de la maniere suivante : 

<style type="text/css"> 
body{font-size: 18px;} 
hl{font-size: 2em;margin-top: 5px;} 

div#menu (position: absolute ; width:100%; height: HOpx; left:0px; top:0; 

background-col or : rgb(255 ,102 ,5) ;col or :white; ) 
div#corps { position: absolute ;width:100%; 1 eft : ; top:110px;color:black;}© 
li {display:inline; border: solid lpx white;padding: lOpx 10px;} 
div#corps hlfposition: absolute; width:600px; height:40px;top: 20px; 

left: 300px;background-color: #AAA; margin: 0;)© 
img {position: absolute; top: 70px;right:20px;}@ 

p {position: absolute;width: auto; top: 70px; right:260px; left:30px;margin: 0; 
text-align: justify;background-color: #BBB;}© 
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a{text-decoration: none;color: white;} 
</style> 

Le second element <div> garde son positionnement par rapport a la page (repere Q). 
mais les elements qu'il contient sont a leur tour positionnes. Ses elements enfants <hl>, 
<img /> et <p> etant eux-memes positionnes de maniere absolute, ils ne le sont pas par rap- 
port a la page mais par rapport a leur parent. L' element <hl> a une largeur de 600 pixels 
et une hauteur de 40 pixels ; il est place a 300 pixels du bord gauche de son parent et a 
20 pixels de son bord superieur (soit 1 10 + 20 = 130 pixels du bord superieur de la page) 
(repere ©). 

L' image est placee a 70 pixels du bord haut de son conteneur et a 20 pixels de son bord 
droit (repere ©). Elle n'est pas dimensionnee explicitement et conserve ses dimensions 
intrinseques qui sont celles du fichier image. Le paragraphe <p> n'est pas non plus dimen- 
sionne explicitement et sa largeur est fixee avec la valeur auto. II sera ainsi redimensionne 
automatiquement sans empieter sur l'image si la fenetre est elle-meme redimen- 
sionnee. En pratique, c'est son positionnement a 260 pixels du bord droit et a 30 pixels 
du bord gauche qui conditionne sa largeur. 

Notons que si nous deplacions le conteneur de tous ces elements en modifiant les pro- 
prietes 1 eft et top du second element <di v>, la position de ces trois elements a l'interieur 
de leur conteneur resterait inchangee. La figure 13-12 montre le resultat obtenu avec ces 
positionnements. 
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L'exemple suivant permet de creer un autre type de presentation tres classique puisqu'il 
permet de diviser la page en trois zones. La premiere est un bandeau qui peut contenir le 
titre du site ou une publicite, l'espace restant etant divise en deux colonnes de la meme 
facon que nous l'avons realise avec des cadres au chapitre 8. Le contenu est identique a 
celui des exemples precedents mais il est structure differemment. A chaque zone corres- 
pond un element <div> qui va etre positionne de maniere absolue dans la page. Nous 
n'avons pas defini ici d'attributs id pour chacun d'eux, mais nous appliquons des classes 
differentes a chaque division. 

Le premier element <div> (repere ©) qui contient un titre <hl> (repere 0) est positionne 
comme precedemment en haut de la page apres avoir ete dimensionne a 100 % en largeur 
et 100 pixels en hauteur. On evite ici de definir une hauteur en pourcentage pour qu'elle 
ne depende pas du contenu de la page. Ces styles sont definis dans la classe div.tete 
(repere ©)• 

Le reste de la page est partage en deux colonnes. La colonne de gauche (repere ©) contient 
le meme menu (repere ©) que dans l'exemple 13-7, mais dans un affichage vertical, soit 
son style par defaut. Cet element <d i v> est d' abord dimensionne avec une largeur de 20 % 
de celle de la page et une hauteur de 100 %. II est positionne de maniere absolue au 
moyen de la classe div.menu a 100 pixels du bord haut de la page et a pixel de son bord 
gauche (repere ©). 

Le contenu editorial de la page constitue la colonne de droite creee avec le troisieme 
element <div> (repere ©). II contient un titre (repere ©), une image (repere ©) et un 
paragraphe (repere ©) comme dans les exemples precedents. Son traitement est 
assure par la classe di v. contenu dans laquelle il est dimensionne en largeur a 78 % et 
avec la valeur auto en hauteur. Son positionnement est absolu et il est place a 20 % de 
la largeur de la page du bord gauche et a 100 pixels du bord superieur (repere ©). 
Avec leurs dimensions et positionnement respectifs, les trois zones sont bien collees 
les unes aux autres. 

Exemple 13-8. Division de la page en trois zones 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 
<head> 

<title> La reference des elements XHTML 1.1 </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css"> 
body{font-size: 18px;} 

div.tete {position: absolute ; left:0px;top:0px; width:100%; height:100px; 

background-color:rgb(0,0,153);margin:0; } 
div.menu (position: absolute ; width:20%; height: 100%; left:0px; top:100px; 

background-col or: rgb(255 ,102 ,51) ;color:white; } 
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div.contenu {margin: 1% ; position: absolute ;width:78%; left: 20%; 

top :100px; background- col or: white; col or: black; } 
di v hi {font- size: 50px;font-styl e: i tal ic;col or : rgb (255, 102,51) ; 

margin-top:0px;margin-left:200px; } 
li {padding: 15px;} 
p{text-align: justify;} 
imgffloat: left; margin: lOpx 0;) 
</style> 
</head> 
<body> 

<div cl ass="tete"> 
<hl>   Reference XHTML 1.1 </hl> 
</div> 

<div cl ass="menu"> 
<ul> 

<li> <a href="pagel . html " tabindex="l" accesskey="A" 
*» titl e="Structure">Structure</a> </li> 

<li> <a href="page2.html " tabindex="2" accesskey="B" titl e="Texte">Texte</a> 
</li> 

<li> <a href="page3.html " tabindex="3" accesskey="C" titl e=" Images">Images</a> 
</li> 

<li> <a href="page4.html " tabindex="4" accesskey="D" 
<=» title="Formulaires">Formulaires</a> </li> 



tabindex="5" 



tabindex="6" 



tabindex="7" 



access key="E" titl e="Liens">Liens</a> 
access key="G" titl e="Tableaux">Tabl eaux 
access key="H" titl e=" Cadres ">Cadres</a> 



<li> <a href="page5.html ' 

</li> 

<li> <a href="page6.html ' 

</a> </li> 
<li> <a href="page7.html ' 

</li> 
</ul> 
</div> 

<div cl ass="contenu"> 
<hl>La declaration Hit; ! DOCTYPE&gt : </hl> 

<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
«*• et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit 
lucem . . .</p> 
</div> 
</body> 
</html> 
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La figure 13-13 montre le resultat obtenu avec ces definitions de styles. Nous pouvons 
remarquer une fois de plus l'interet des styles CSS car la presentation n'est pas la meme 
que celle de la figure 13-12 alors que le contenu est le meme. 
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Figure 13-13 

Positionnement en trois zones 



Notre dernier exemple constitue une structure de page complexe comportant un bandeau, 
trois colonnes, la premiere contenant le menu, la deuxieme un contenu textuel et un pied 
de page qui inclut l'adresse de contact. La troisieme colonne contient une liste de liens 
utiles. La figure 13-14 montre la presentation de la page que nous allons obtenir. 

Chacune de ces zones est creee par un element <div> dimensionne puis positionne de 
maniere absolue en leur appliquant les classes di v.haut, di v. gauche, di v. droit, di v. contenu et 
div.bas. La seule division qui represents un element nouveau par rapport aux cas ante- 
rieurs est celle qui permet de placer la division d'adresse en bas de la zone centrale de 
contenu. Cette division est incluse dans la division precedents et non plus directement 
dans <body>. 

Dans le code de 1' exemple 13-9, les elements <div> sont volontairement places dans le 
desordre afin de demontrer que leur position dans le code XHTML n'a aucune impor- 
tance. Les definitions et les roles des classes sont les suivants : 

• di v.haut : (reperes O et ©) largeur 100 %, hauteur 70 pixels, positionne en haut et a 
gauche (top : et 1 ef t : 0). 
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• div. gauche: (reperes © et ©) largeur 15 %, hauteur 100 % (ou auto), positionne a 
70 pixels du haut et a du bord gauche. 

• di v . droi t : (reperes Q et ©) largeur 15 %, hauteur 100 % (ou auto), positionne a 70 pixels 
du haut et a du bord droit. 

• div. contenu : (reperes © et ©) largeur 70 %, hauteur auto car la hauteur du paragraphe 
peut varier si on reduit la fenetre du navigateur. 

• di v . bas : (reperes © et ©) elle s'applique a la division incluse dans le contenu. Sa lar- 
geur est de 100 % de celle de son parent (soit 70 % de celle de la page) et sa hauteur 
de 60 pixels. Elle est positionnee a gauche et en bas de son parent. 

Ann que son contenu ne cache pas la fin du texte, on notera qu'il faut que le paragraphe 
(repere ©) ait une marge basse d'au moins 60 pixels (repere ©). 
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Figure 13-14 

Organisation d'une page complexe en cinq zones 



Exemple 13-9. Creation d'une structure complexe en positionnement absolu 

<?xml vers ion=" 1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtnilll/DTD/xhtmlll.dtd"> 
<html xmlns="http: //www. w3.org/1999/xhtml " xml :1 ang="f r"> 
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<head> 

<title> La reference des elements XHTML 1.1 </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css"> 
body {font-size: 18px; background- col or: white; col or: black;} 
div.haut {position: absolute ; left:0px;top:0px; width:100%; height:70px; 

background-color:rgb(0,0,153);margin:0; Q 
div. gauche {position: absolute ; width : 15% ; height: auto; left:0px; top:70px;}@ 
div.droit{position: absolute ; width:15%; height: 100%; right:0; top:70px; }© 
div.contenu {position: absolute ;width:70%; height:auto;left:15%; 

top:70px;padding: lOpx 10px;border-left: lpx solid black; 

border-right: lpx solid black; }Q 
div.basfposition: absolute ; left:0px; bottom:0px; wi dth : 100% ; 
*=* hei ght:60px; background-col or :rgb( 0,220, 153 ) ;}© 
div hi {font-size: 50px;font-style:ital ic;color:rgb(255,102,151) ; 

margin-top:0px;margin-left:200px; } 
li {padding: 15px;) 

p{text-al ign : justify ; margin -bottom : 60px; }© 

img{float: left;margin: lOpx 0;} 
</style> 
</head> 
<body> 

©<div cl ass="droit"> 
<ul> 

<li> <a href="xhtml 10. html " tabindex="l" accesskey="A" title="Structure">XHTML 
1.0</a> </li> 

<li> <a href="page2.html " tabindex="2" accesskey="B" title="Texte">XHTML 1.1 
</a> </li> 

<li> <a href="page3.html " tabindex="3" accesskey="C" title="Images">XHTML 
frameset</a> </li> 

<li> <a href="page4. html " tabindex="4" accesskey="D" title="Formulaires">CSS 

K/ a > </li> 
<!-Suite de la liste --> 
</ul> 
</div> 

©<div cl ass="contenu"> 
<hl>La declaration < ! DOCTYPE&gt ; </hl> 
<img src="couvxhtml_gd. jpg" alt="XHTML CSS" /> 

0<p>ln principio creavit Deus caelum et terrain terra autem erat inanis et vacua 
»*• et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 

Deus fiat lux et facta est lux et vidit Deus lucem quod esset . . .</p> 
©<div class="bas"> 
Contactez-moi pour toutes questions sur XHTML <address>xhtml@funxhtml .com 

</address> 
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</div> 
</div> 

©<div cl ass="gauche"> 
<ul> 

<li> <a href ="pagel . html " tabindex="l" accesskey="A" 
*» titl e="Structure">Structure</a> </li> 

<li> <a href="page2.html " tabindex="2" accesskey="B" titl e="Texte">Texte</a> 
</li> 

<li> <a href="page3.html " tabindex="3" accesskey="C" titl e=" Images">Images</a> 
</li> 

<!-Suite de la liste --> 
</ul> 
</div> 

©<div cl ass="haut"> 
<hl>   Reference XHTML 1.1 </hl> 
</div> 
</body> 
</html> 



Le positionnement fixe 

Au chapitre 8, nous avons envisage la maniere de creer des cadres pour diviser la page en 
zones qui demeurent fixes dans la fenetre du navigateur. Outre que cette mefhode, consi- 
deree aujourd'hui comme obsolete, presente plusieurs inconvenients deja abordes, elle 
necessite l'emploi de la DTD XHTML 1.0 frameset. Comme nous l'avions signale au 
chapitre 8, en utilisant des styles CSS appropries, il est possible de creer une presentation 
quasi similaire. 

Le positionnement fixe n'est qu'un cas particulier du positionnement absolu. La determi- 
nation des dimensions et de la position d'un element se realisent de la me me facon a 
l'aide des proprietes width et height pour les dimensions, et top, left, right et bottom pour 
determiner la position. La seule difference reside dans le fait que le bloc conteneur utilise 
n'est plus forcement l'element parent mais la fenetre du navigateur. De cette facon, un 
element positionne de maniere fixe reste a sa place meme en cas de defilement de la page 
quand la hauteur de celle-ci depasse celle de la fenetre du navigateur. En d'autres termes, 
les proprietes de positionnement sont appliquees non plus par rapport au conteneur mais 
par rapport aux bords de la fenetre. 

Ce type de positionnement peut etre realise en utilisant encore la propriete pos i ti on en lui 
donnant la valeur fixed. Elle est bien geree par les navigateurs actuels comme Mozilla, 
Firefox, Netscape, ce qui n'a pas toujours ete le cas, mais tres incompletement par Internet 
Explorer. 

Si nous reprenons exactement le meme code XHTML que celui de l'exemple 13-9, nous 
pouvons realiser un positionnement fixe des zones haute, gauche, droite et basse qui sont 
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des parties de navigation qu'il peut etre utile de voir en permanence. Pour ce faire, nous 
ecrivons les styles suivants : 

Exemple 13-10. Le positionnement fixe 

<style type="text/css"> 

body {font- size: 18px; background- col or: white; col or :bl ack; } 

div.haut {position: fixed Q left:0px;top:0px; width : 100%; height:10%; 

background-color:rgb(0,0,153);margin:0; } 
div. gauche {position: fixed©; wi dth : 15% ; height: auto; left:0px; top:10%;} 
div.droitfposition: fixed Q; width:15%; height: 100%; right:0; top:10%; } 
div.contenu {position: absolute ©;width:70%; height:auto;left:15%; 

top:10%;padding: lOpx 10px;border-left: lpx solid black; 

border-right: lpx solid black; } 
div.basfposition: fixed 0; left:0px; bottom:0px; width:100%; 

hei ght:60px; background-col or :rgb(0, 220, 153) ;} 
div hi {font-size: 50px; font-style: ital ic;col or : rgb(255,102, 151) ; 

margin-top:0px;margin-left:200px; } 
li {padding: 15px;} 

p{text-al ign : justify ; margin -bottom: 60px; } 
img{float: left;margin: lOpx 0;} 
</style> 

Les seules modifications effectuees consistent a remplacer le mot-cle absol ute par f i xed dans 
toutes les classes sauf celle du contenu qui doit pouvoir denier pour etre lisible. La 
figure 13-15 montre le resultat obtenu dans une fenetre redimensionnee et apres avoir effec- 
tue un defilement vertical. Nous y constatons que seule la zone centrale a defile alors que les 
autres n'ont pas bouge et restent entierement visibles. Nous pouvons remarquer egalement 
que la zone basse est maintenant bien positionnee par rapport a la fenetre car elle 
occupe toute la largeur de l'ecran contrairement au cas precedent de positionnement absolu. 

Le positionnement fixe represente done une alternative credible a la creation de cadres 
comme nous l'avons fait au chapitre 8. Nous parlerons plutot de simili-cadres qui donnent 
1' illusion d'une page avec cadres et en presente les avantages visuels, mais sans interac- 
tivite entre les differentes zones comme e'est le cas des cadres. La procedure a suivre, 
relativement simple, est la suivante : 

• Creer autant d'elements <di v> que Ton desire obtenir de zones differentes dans la page. 
Chaque zone est l'equivalent des elements <frame /> utilises dans la methode avec 
cadres. Pour chacune de ces zones, definir la propriete position avec la valeur f i xed. 

• Dimensionner chacune de ces divisions en utilisant les proprietes width (largeur) et 
heigth (hauteur). 

• Positionner les elements <div> en definissant les proprietes left, top, right et bottom 
qui nous permettent de placer les elements <di v> par rapport aux bords de la fenetre. 

• Definir eventuellement les proprietes de couleur de fond, de bordure, de marge et d'espa- 
cement pour ameliorer la presentation du contenu de chaque element <div>. 
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Figure 13-15 

Le positionnement fixe 



Pour retrouver une interactivite entre les « simili-cadres », par exemple afin que le clic 
sur un lien du menu affiche un contenu adapte dans la zone centrale, nous pouvons creer 
plusieurs pages qui ont toutes en commun les divisions positionnees de maniere fixe et 
dont le contenu de la zone centrale est variable. L' illusion d'un site avec cadres est alors 
complete. 



Visibility et ordre d'empilement 

Nous avons pu constater qu'en positionnant des elements de maniere relative, absolue ou 
fixe, il etait possible que plusieurs elements occupent partiellement ou totalement le 
meme espace dans la fenetre du navigateur. Dans ce cas, le dernier apparu dans l'ordre du 
code XHTML se superpose au precedent. Pour pouvoir intervenir sur cet etat de fait et 
gerer volontairement ces superpositions, CSS definit un placement des elements selon 
trois dimensions, les deux premieres dans le plan de l'ecran sur lesquelles nous pouvons 
intervenir avec les proprietes left, top, right et bottom comme nous l'avons deja vu, et la 
troisieme dimension est definie selon un « axe des z » perpendiculaire a l'ecran et dirige 
vers le spectateur. Nous pouvons gerer cet ordre d'empilement au moyen de la propriete 
z-i ndex dont la syntaxe est la suivante : 

z-index : auto | <Nombre> | inherit 
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Elle ne s' applique qu'aux elements positionnes, et les valeurs qu'elle peut prendre sont 
les suivantes : 

• auto : 1' element a la me me valeur que celle de son parent direct, qu'il soit defini expli- 
citement par un nombre ou implicitement par son ordre d' apparition dans le code 
XHTML (le dernier ay ant la priori te). 

• <Nombre> : un nombre entier positif ou negatif, sachant que plus le nombre est 
grand, plus 1' element est place en avant, et se superpose a ceux dont la valeur 
est inferieure. 

Nous pouvons intervenir dynamiquement sur 1' ordre d'empilement au moyen de code 
JavaScript en modifiant la valeur de la propriete CSS z-index (qui en JavaScript porte le 
nom de z Index) en reponse a une action du visiteur (survol de l'element par la souris, 
clic...)- Cette modification est geree par les attributs gestionnaires d'evenements corres- 
pondants (onmouseover, onclick...) ou par la pseudo-classe :hover par exemple. 

Dans le meme ordre d'idees, nous pouvons appliquer a tous les elements la propriete 
visibility qui permet de les cacher ou de les rendre visibles. Sa syntaxe est la 
suivante : 

visibility : visible [ hidden | collapse | inherit 

• visible: l'element est visible normalement et c'est la valeur par defaut. 

• hi dden : l'element est cache mais la difference de comportement avec la propriete di s- 
pl ay, quand elle prend la valeur none, c'est que la boite de l'element est ici maintenue 
dans la page mais qu'elle est simplement vide et non retiree de la page comme avec 
di spl ay. 

• collapse : son comportement est identique a la valeur hidden mais elle s'applique par- 
ticulierement aux cellules des tableaux. 

Cette propriete est heritee par defaut et elle s'applique done aux elements enfants. 

L' exemple 13-11 donne une illustration de la gestion de l'ordre d'empilement et de la 
visibilite de plusieurs elements. La page comporte une division (repere 0) qui contient 
un paragraphe <p> positionne (reperes et 0), lui-meme incluant du texte et une image 
flottante (reperes et ©). La division inclut egalement deux images (reperes et ©) 
qui y sont positionnees de maniere absolue (reperes et 0). La figure 13-16 montre le 
resultat obtenu initialement lors de l'affichage de la page. 

Compte tenu de l'ordre d'apparition des elements enfants de la division <div>, l'ordre 
d'empilement sans utilisation de la propriete z-index devrait etre de l'arriere vers l'avant, 
le paragraphe, l'image « un » puis l'image « deux » au premier plan. Cependant, comme 
nous attribuons a la propriete z-i ndex de la premiere image la valeur 2 et a la suivante la 
valeur 1, cet ordre est inverse. 
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Figure 13-16 

L'etat initial de la page avec des elements empties 



Si la propriete z-index ne servait qu'a definir un ordre d'empilement fixe, elle 
n'aurait qu'un interet limite car il suffirait de placer en dernier dans le code XHTML 
l'element que Ton veut voir se positionner au premier plan. En gerant l'evenement 
onclick par exemple pour le paragraphe ou chacune des images avec le code Java- 
Script suivant : 

oncl ick="this.style.zlndex++" 

nous permettons au visiteur de placer au premier plan l'element qu'il desire et even- 
tuellement d'inverser cet ordre a chaque nouveau clic. Notons de nouveau qu'en Java- 
Script le nom de la propriete devient zlndex et que l'operateur ++ signifie simplement 
qu'il faut augmenter la valeur de la propriete de 1 unite. De meme le texte du paragraphe, 
recouvert partiellement par l'image « un », peut etre mis au premier plan pour etre 
entierement lisible. 

La visibilite de l'image incluse dans le paragraphe (repere ©) est controlee par la 
pseudo-classe :hover. Si le visiteur positionne le curseur sur cette image (en le laissant 
immobile, sinon on obtient un effet de clignotement), elle devient invisible en laissant 
l'espace qu'elle occupait vide dans le paragraphe. Cet effet est obtenu en donnant a la 
propriete visibility la valeur hidden en cas de survol (il est annule automatiquement 
quand le curseur quitte la zone de l'image). 
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Exemple 13-11. Visibility et empilement 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Visibilite et ordre d'empilement</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" > 
body { font- size:18px; } 

img.un{position:absol ute;top:160px;left:350px; Q 
img. deux{ position: absolute; top :260px;left:450px; }© 
img#couv{float: left;}© 
img#couv : hover {vi si bi 1 ity : hidden ; }© 

p{background-color: #EEE; position:absolute; top:40px; left:50px;}@ 

</style> 
</head> 
<body> 

©<div> 

©<p onclick="this. style. zIndex++"Xbig>XHTML </big>: 
©<img id="couv" src="couvxhtml_gd. jpg" alt="XHTML CSS" height="130" 
width="107" /> 

In principio creavit Deus caelum et terram terra autem erat inanis et vacua et 
tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona et divisit 
lucem ac tenebras appel 1 avitque lucem diem et tenebras noctem factumque est 
vespere et mane dies unus dixit </p> 

0<img src="couvxhtml_gd.jpg" al t="XHTML CSS" height="285" width="240" class="un" 

*»onclick="this.style.zIndex++" /> 

©<img src="couvphp5gd.png" alt="XHTML CSS" height="285" width="240" class="deux" 
*»onclick="this.style.zIndex++" /> 

</div> 
</body> 
</html> 



La figure 13-17 donne le resultat obtenu apres avoir successivement mis le paragraphe 
devant la premiere image (en cliquant sur le paragraphe), la seconde image devant la pre- 
miere (en cliquant sur la seconde), puis en placant le curseur sur l'image incluse dans le 
paragraphe. Par une serie de nouveaux clics, il est possible de revenir en arriere. 
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Figure 13-17 

L'etat de la page apres la modification de I'empilement et de la visibilite de certains elements 



Exercices 

Exercice 1 : Incorporez trois images dans une page en definissant pour l'element <img /> les 
proprietes CSS wi dth et/ou height (sans utiliser les attributs de meme nom). Que se passe- 
t-il si les dimensions intrinseques des images depassent ces valeurs ? 

Exercice 2 : Dans l'exercice precedent, comment proceder au dimensionnement CSS de 
facon que chaque image occupe la place qui lui est necessaire d' apres les dimensions du 
fichier image ? 

Exercice 3 : Si les dimensions d'une image sont definies en pourcentage de celles de son 
conteneur, et que ses proportions largeur/hauteur sont inconnues, comment faire pour 
qu'elle ne soit pas deformee ? 

Exercice 4 : Incluez trois elements <div> contenant du texte, l'un dans l'autre, et definis- 
sez la largeur a 70 % du precedent pour chacun d'eux. Le premier doit avoir 800 pixels 
de haut et les suivants doivent correspondre a 80 % de la hauteur du precedent. 

Exercice 5 : Creez deux paragraphes d'une hauteur de 300 pixels et d'une largeur de 
700 pixels. Incluez-y un texte tres long et gerez le debordement du texte afin qu'il soit 
entierement lisible. 
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Exercice 6 : Creez cinq titres de niveau 2 et affichez les sous-formes de liste (indice : 
voir la propriete di spl ay). 

Exercice 7 : Dans un element <div>, incluez un element <span> contenant du texte et 
donnez-lui le style bloc. 

Exercice 8 : Creez un menu vertical dont les elements sont des liens <a>. 

Exercice 9 : Creez une page contenant un paragraphe incluant du texte et deux elements 
<img /> qui se suivent. Faites flotter les images, la premiere a gauche et la seconde a 
droite. 

Exercice 10 : Reprenez l'exercice precedent et empechez le flottement de la deuxieme 
image. 

Exercice 11 : Placez trois images de tailles initiales differentes dans une page. Ecrivez 
les styles pour qu'elles s'affichent avec la meme taille. Ensuite, positionnez-les arm 
d'obtenir un effet de cascade avec un decalage horizontal et vertical constant pour chaque 
image par rapport a la precedente. L'utilisateur doit pouvoir mettre chacune d'elles au 
premier plan en cliquant dessus (voir la propriete z- index). 

Exercice 12 : Creez une mise en page a trois colonnes de largeurs respectives de 20 %, 
65 % et 15 %. La premiere et la troisieme doivent contenir respectivement un menu et 
une liste de liens crees a partir d'images. La colonne centrale doit avoir un contenu editorial. 

Exercice 13 : Creez une mise en page selon le modele de la figure ci-dessous : 

O 





La colonne de gauche (repere Q) a une largeur de 200 pixels et le bandeau (repere ©) 
une hauteur de 150 pixels. Le bandeau contient le titre du site, la colonne de gauche un 
menu et la zone principale (repere ©) du texte et des images au choix. Le premier lien du 
menu doit afficher une page ayant la meme structure, le meme contenu dans les zones O 
et ©. mais un contenu editorial different dans la zone ©. 

Exercice 14 : Reprenez l'exemple precedent de facon a ce que les zones Q et © soient 
fixes dans la fenetre du navigateur. 
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Le style des tableaux 



Nous avons constate dans les chapitres precedents que les tableaux peuvent avoir des 
applications tres variees, qu'il s'agisse d'organiser des donnees de maniere structuree, 
de presenter un formulaire ou encore, malgre les reserves indiquees, d'ordonner toute 
une page. Cela dit, les styles par defaut appliques aux tableaux et a leur contenu dans les 
elements <td> ou <th> ont un rendu particulierement pauvre et austere du point de vue 
esthetique. Nous allons voir maintenant qu'un certain nombre de proprietes, deja 
etudiees par ailleurs, peuvent s'appliquer aux tableaux et a leurs composants, comme les 
bordures, les couleurs et images de fond. De plus, le modele CSS de gestion des tableaux 
possede des caracteristiques specifiques qui permettent de gerer les dimensions des cellules, 
des largeurs de tableaux entiers ou des colonnes qui les composent. De nouvelles proprietes 
fournissent egalement des outils pour gerer les tableaux et les cellules vides des tableaux 
symetriques ou irreguliers. 

Le modele de gestion des tableaux 

Les tableaux permettent principalement de creer un modele de gestion des donnees. En 
structurant un tableau, on peut organiser ces informations en lignes et en colonnes, de 
facon qu'elles entretiennent des relations entre elles. C'est ce type de relations que nous 
avons creees dans les tableaux statistiques du chapitre 6. Les differents elements abordes 
nous permettent de structurer un tableau en groupes de lignes ou de colonnes. Avec cer- 
tains attributs des elements XHTML de creation des tableaux, il est aussi possible de 
mettre en exergue la structure definie par le concepteur. Cependant, leurs effets sont rela- 
tivement limites, et 1' application de styles CSS a ces elements donne les moyens de 
diversifier considerablement le rendu final des tableaux. 
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Le modele CSS de gestion des tableaux se conforme a celui defini dans XHTML, ce qui 
etablit une coherence entre ces deux systemes complementaires. Mis a part le titre du 
tableau cree avec l'element <caption>, et situe en dehors du quadrillage visible ou non 
du tableau, tout le contenu est inclus prioritairement dans des lignes. Dans le modele 
XHTML et CSS, nous ne pouvons pas creer de colonnes independamment des lignes, 
autrement dit le modele donne la priorite aux lignes sur les colonnes. Une colonne n'a 
d' existence que parce qu'elle contient des cellules qui appartiennent a une suite de lignes 
creees anterieurement. Une des premieres consequences de cet etat de fait est que si nous 
definissons un style pour un element <tr> particulier, en ecrivant une classe ou un selec- 
teur d'attribut id par exemple, ce style va s'appliquer a toutes les cellules de la ligne en 
question et pas aux cellules de la ligne suivante. 

Les couleurs des cellules 

Les differents elements XHTML propres aux tableaux s'inscrivent dans une hierarchie 
bien precise, l'element parent de tous les autres etant <table> et ceux de plus bas niveau 
<td>et<th>. Quand nous voulons appliquer une couleur de fond a un element de tableau 
(tableau dans son integralite, groupe de lignes ou de colonnes, ligne, colonne ou cellule), 
il peut survenir des conflits dans la definition de ces proprietes. Pour regler ces conflits, 
le modele CSS de gestion des tableaux definit un ordre de priorite pour chacun de ces 
elements. Dans ce modele, un tableau est considere comme un empilement de couches, 
de facon similaire a ce que Ton trouve dans les logiciels de creation d'images comme 
Photoshop, la couleur de la couche superieure masquant celle de la couche inferieure, 
sauf dans les zones transparentes. Ce principe est egalement identique a celui que nous 
avons utilise avec la propriete z- index, mais nous nous ne pouvons pas ici modifier cet 
ordre predetermine. 

La liste suivante presente cet ordre de priorite, de la couche la plus haute a la plus basse. 
Pour bien gerer les couleurs de fond de ces elements, il faut bien noter que, pour chacun 
d'entre eux, si aucune valeur n'est attribute a la propriete background-col or, cette derniere 
a la valeur transparent, ce qui implique que l'element concerne laisse voir la couleur 
definie pour son parent situe a la couche inferieure. De plus, l'ordre de priorite l'emporte 
toujours sur celui de la definition des styles. 

1. Les cellules creees avec les elements <td> et <th> ont la plus haute priorite. La couleur 
de chaque cellule peut done etre definie individuellement en utilisant un selecteur 
d'attribut id ou une classe. Les cellules vides declarees, cachees avec la propriete 
empty-eel 1 s (voir plus loin), sont toujours transparentes. 

2. Les lignes creees avec <tr> viennent ensuite. 

3. Les groupes de lignes crees avec <tbody>, <thead> et <tfoot> constituent la troisieme 
couche. 

4. Les definitions de colonnes appliquees dans l'element <col /> figurent dans la couche 
suivante. 

5. Les groupes de colonnes crees dans l'element <col group> sont dans la cinquieme couche. 
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6. La couleur de fond definie pour l'element <table> parent de tous les precedents a la 
plus basse des priorites. 

La figure 14-1 resume cet ordre de priori te des couches des elements de tableau. 



Figure 14-1 

L'empilement des 
couches pour les 
elements de tableau 




Dans l'exemple de la figure 14-1, la couleur de fond pour l'element <tabl e> est gris clair 
(#EEE repere ©). Len-tete <thead> (repere ©) et le pied de tableau <tfoot> (repere ©), 
dont les couleurs de fond sont un gris plus fonce (#DDD repere ©), vont l'emporter sur la 
couleur de l'element <table> car ils sont sur une couche superieure. En revanche, les 
lignes de donnees contenues dans l'element <tbody> (repere ©), pour lequel aucune cou- 
leur n'est definie explicitement, ont la couleur de fond de l'element <table>. La couleur 
de fond de l'element <col /> (reperes © et ©), qui s'applique aux deux premieres colon- 
nes, s'impose egalement a celle de <tabl e> pour la meme raison et aussi parce qu'aucune 
couleur n'est definie pour <tbody>. Cependant, comme la couleur de fond definie dans la 
classe .fonce (repere ©) est appliquee au troisieme element <tr> (repere ©), celle -ci 
s'impose au-dessus de celle des elements <table> et <col /> dont les ordres de priorite 
sont inferieurs. 

Pour personnaliser et mettre en evidence la cellule particuliere qui contient la variation 
maximale, nous creons un style avec un selecteur d'id (repere 0) qui sera applique au 
seul element <td> dont l'attribut id vaut "max" (repere ©). 

Exemple 14-1. L'empilement des couleurs de fond des tableaux 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Couleur de fond des tableaux</title> 
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<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css"> 

table{background-color: #EEE;}© 

thead, tfoot{background-color:#DDD;color: blue;)© 

tr.fonce {background-color: #333;color: white;}© 

col {background-color: orange;)© 

#max{background-color: red;color: yellow; )© 
</style> 
</head> 
<body> 

<table border="0" summary="Val eur de 1'indice" > 
<caption>Indice du cout de la construction</caption> 
<col span="2" wi dth=" 25X" al ign="center"/>© 
<thead>© 
<tr> 

<th>Trimestre</th> 
<th>Indice </th> 
<th>Moyenne </th> 
<th>Variation annuelle en % </th> 
<th>Date de parution</th> 
</tr> 
</thead> 
<tfoot>© 
<tr> 

<th>Trimestre</th> 
<th>Indice </th> 
<th>Moyenne </th> 
<th>Variation annuelle en % </th> 
<th>Date de parution</th> 
</tr> 
</tfoot> 
<tbody>© 
<tr> 

<td>ler trimestre 2005</td> 

<td>1270</td> 

<td>1269,50</td> 

<td id="max">+4,83</td>© 

<td>08/07/2005</td> 
</tr> 
<tr> 

<td>4eme trimestre 2004</td> 
<td>1269</td> 
<td>1258,25</td> 
<td>+4,8K/td> 
<td>08/04/2005</td> 
</tr> 
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<tr cl ass="fonce">© 

<td>3eme trimestre 2004</td> 

<td>1272</td> 

<td>1244,50</td> 

<td >+4,58</td> 

<td>12/01/2005</td> 
</tr> 
<tr> 

<td>2eme trimestre 2004</td> 
<td>1267</td> 
<td>1227,25</td> 
<td>+3,85</td> 
<td>15/10/2004</td> 
</tr> 

< !-- Suite des donnees --> 
</tbody> 
</table> 
</body> 
</html> 

La figure 14-2 montre le resultat obtenu. On remarque bien l'empilement des couleurs de 
fond des differents elements. 
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Dans l'exemple 14-2, nous verrons qu'il est possible de creer des styles specifiques pour 
mettre en evidence des colonnes ou des groupes de colonnes. 



Les titres des tableaux 

L' element <capti on>, vu au chapitre 6, contient le titre du tableau. Par defaut, en XHTML 
pur, il est place au-dessus du tableau. Nous pouvons determiner explicitement sa position 
a l'aide de la propriete caption-side dont la syntaxe est la suivante : 

caption-side: top [ bottom | inherit 

Elle n'est applicable qu'a l'element <caption> ou a ceux dont la propriete display a la 
valeur table-caption et elle est heritee pour les tableaux inclus l'un dans l'autre. Avec 
la valeur top, le titre est place au-dessus du tableau, et en dessous avec la valeur bottom. 
Les valeurs qui permettaient de placer le titre a gauche ou a droite ayant ete supprimees 
de la version CSS 2.1 par manque d' implementation, nous pouvons creer ces positions en 
ajoutant une colonne a gauche ou a droite du tableau, en fusionnant toutes ces cellules et 
y ecrivant le titre sans utiliser l'element <capti on>. On precede dans ce cas a l'application 
de styles particuliers en utilisant un selecteur d'id ou une classe pour cette cellule de titre. 

Que le titre soit situe au-dessus ou en dessous du tableau, les marges haute et basse defi- 
nies pour les elements <caption> et <table> fusionnent au profit de la plus grande, sauf 
dans Internet Explorer qui place systematiquement ces marges au-dessus du tableau et 
non pas entre le titre et le tableau. 

L'exemple 14-2 presente une facture incluse dans un tableau. Nous y definissons des sty- 
les pour l'element <capti on> (repere ©) arm d'ameliorer sa presentation. II s'agit ici de la 
creation d'une bordure, d'une marge basse et du choix de la police et de la taille des 
caracteres (repere ©), mais nous pourrions egalement lui ajouter une couleur de fond et 
d'avant-plan par exemple. La marge basse du titre qui est de 20 pixels fusionne avec la 
marge haute du tableau (repere O) qui est de 40 pixels, pour obtenir une marge unique de 
40 pixels. Notons egalement que la largeur de bordure definie pour le tableau dans l'attri- 
but border, qui a la valeur 15 (repere ©), n'est pas prise en compte, mais ecrasee par celle 
qui est definie a 8 pixels dans le style CSS par la propriete border (repere ©). Cela 
demontre une fois encore que les styles CSS l'emportent toujours sur les definitions du 
code XHTML. 

Nous illustrons par la meme occasion 1' affectation de couleurs de fond differentes a des 
groupes de colonnes. Les donnees sont reparties en trois groupes, crees dans trois ele- 
ments <col group> (reperes ©, © et ©), chacun utilisant une des classes de couleur . gras, 
.prix et .date (reperes ©, © et ©), ce qui permet d'attribuer une couleur differente a 
chaque groupe. 

Exemple 14-2. Creation du titre d'un tableau 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
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<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Titre et groupement de col onnes</titl e> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" title="tableau"> 

table{margin-top: 40px;border: blue double 8px;font-size: 18px;}© 
captionfborder: blue double 3px;margin-bottom:20px; 
«*■ font-family: Arial .sans-serif ;font-size: 1.5em;}© 
.gras(font-weight:bold; background-color: #CCC;}© 
.prix{ background-col or: yel 1 ow; }© 
.date (background-col or :#AAA; col or :bl ue; }© 
col (text-align: center;}© 
</style> 
</head> 
<body> 

<table border="15"© width="100%" rul es="groups" summary="Facture de livres" 
*» cellpadding="5"> 
<caption>Facture de votre commande de livres</caption>© 
<!-- Groupe 1 : Dates --> 
<colgroup id="date" width="10%" span="l" align="left" cl ass="date">© 
</col group> 

<!-- Groupe 2 : Titre et Auteur --> 

<colgroup id="titre" span="2" width="25^" align="left" class="gras">© 
</col group> 

<!-- Groupe 3: Quantite, Prix unitaire, Prix total --> 
<colgroup id="prix" span="3" align="left" cl ass="prix">© 

<col width="10Z" /> 

<col span="2" width="15%" /> 
</colgroup> 

<thead><tr><th>Date </th><th>Titre </thXth>Auteur</thXth>Quantite </th> 

<th>Prix Unitaire </th><th>Prix Total </thX/trX/thead> 
<tfoot><tr><th>Date </thXth>Designation </th><th>Auteur</th><th>Quantite 
</th><th>Prix Unitaire </th><th>Prix Total </thX/trX/tfoot> 
<!-- Donnees du tableau --> 
<tbody> 
<tr> 

<td>29/05/2005</td><td>XHTML Desi gn</td><td>Jef f rey Zel dman</td><td>3 </td> 

<td>32.00 €</td><td>96.00 €</td> 
</tr> 
<tr> 

<td>15/06/2005</td><td>CSS 2 </td><td>Raphael Goetter</tdXtd>2</td> 
<td>30.00 €</td><td>60.00 €</td> 
</tr> 
<tr> 

<td>15/12/2005</td><td>XHTML et CSS </td><td>Jean Engel s</td><td>3</td> 
k» <td>29.90 €</td><td>89.70 €</td> 
</tr> 
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</tbody> 
</table> 
</body> 
</html> 

La figure 14-3 montre le resultat obtenu pour le titre et les couleurs des colonnes. 
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La gestion des bordures des cellules 

Les differentes proprietes de creation des bordures vues au chapitre 1 1 sont applicables 
aux cellules des tableaux. Pour ameliorer la gestion des bordures et en particulier celle 
des cellules contigues, CSS fournit la propriete border-col 1 apse qui permet de fusionner 
ou de separer ces bordures voisines. Sa syntaxe est la suivante : 

border-collapse : collapse | separate | inherit 

Elle s'applique a tous les elements de tableau et elle est heritee par tous les elements 
enfants de celui auquel on 1' applique. 

A la valeur col 1 apse correspond la fusion des bordures, et a la valeur separate leur sepa- 
ration. 



Les bordures separees 

Avec la valeur separate, chaque cellule peut avoir une bordure particuliere indepen- 
dante de celle de ses voisines directes. En particulier, une bordure ne va pas empieter 
sur sa voisine meme si son epaisseur est importante. En complement, la propriete 
border-spacing permet de definir un espacement entre les bordures voisines. Elle n'est 
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utilisable que si les bordures sont declarees separees avec border-collapse. Sa syntaxe 
est la suivante : 

border-spacing : <longueur> <longueur> ? | inherit 

Elle s'applique egalement a tous les elements de tableau inclus dans <table> et elle est 
heritee par defaut. Les deux parametres <1 ongueur> deflnissent respectivement les espace- 
ments horizontaux et verticaux entre les cellules. La seconde valeur est facultative, et 
dans ce cas l'unique valeur indiquee s'applique aux deux espacements. Ces valeurs sont 
donnees par un nombre positif et une unite de longueur. Dans l'espacement cree entre les 
bordures apparait la couleur de fond definie pour l'element <tabl e> ou un de ses enfants 
situes plus haut dans l'ordre de priorite defini plus haut. 

Une cellule est materialisee par les bordures entourant son contenu et par sa couleur de 
fond. Quand elle est vide, on peut soit la materialiser quand meme en affichant ses carac- 
teristiques, soit l'effacer en empechant 1' apparition des bordures et du fond. Une cellule 
est consideree non vide si elle contient ne serait-ce qu'un seul caractere (mais pas une 
espace) ou meme l'entite  . En revanche, si elle contient les codes ASCII hexadeci- 
maux du retour chariot (\0D), de nouvelle ligne (\0A), de tabulation (\09) ou d'espace (\20) 
qui peuvent etre generes avec la propriete content par exemple, elle est quand meme 
consideree comme vide. De plus, une cellule pour laquelle la propriete visibility est 
definie avec la valeur hide est aussi consideree comme vide. 

Pour determiner le comportement des cellules vides, nous utilisons la propriete empty- 
eel 1 s dont voici la syntaxe : 

] empty-cells : show | hide [ inherit 

Elle ne s'applique qu'aux elements <td> et <th>. La valeur show permet l'affichage du 
fond et des bordures, et hide cache l'ensemble de la cellule et laisse done apparaitre la 
couleur de fond definie pour son premier element parent (<tr>, <tbody>, <tfoot>, <thead>, 
<col />, <colgroup> ou <table>). 

Comportement de Internet Explorer 

Meme avec la valeur hide, Internet Explorer laisse apparaitre la couleur de fond de la cellule si elle a 
ete definie explicitement. 

Lexemple 14-3 permet de verifier le modele des bordures separees. Pour l'element 
<table>, la propriete border-collapse y est definie avec la valeur separate (repere ©)■ 
l'espacement horizontal entre les bordures a une valeur de 20 pixels et l'espacement ver- 
tical est de 5 pixels (repere ©). Les cellules vides (telle celle du repere Q) sont definies 
comme cachees en donnant la valeur hide a la propriete empty-cel 1 s (repere 0). Les bor- 
dures des cellules ont le style doubl e et une largeur de 5 pixels (repere ©). De plus, une 
bordure particuliere nettement plus large est creee pour la cellule qui contient la valeur 
maximale de la colonne « Variations » (reperes et 0). 
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Exemple 14-3. Les bordures separees 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xml ns="http: //www. w3.org/1999/xhtml "> 
<head> 

<title>Bordures separees des tableaux</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css"> 

table{background-color: #EEE; border-collapse: separate©; 

border-spacing: 20px 5px ©; border: outset 8px red; empty-cells: hide©;} 
caption{font-size: 1.2em; border-bottom: red double 3px;margin-bottom: 20px;J 
tr,td,th{border: double 5px red; background-color: #CCC}© 
.maxi {border: double black 2Opx;}0 
</style> 
</head> 
<body> 

<table summary="Val eur de l'indice"> 
<caption>Indice du cout de la construction</caption> 
<thead> 
<tr> 

<th>Trimestre</th> 

<th>Indice</th> 

<th>Moyenne</th> 

<th>Variation annuelle en %</th> 
<th>Date</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 

<th>Trimestre</th> 

<th>Indice</th> 

<th>Moyenne</th> 

<th>Variation annuelle en K/th> 
<th>Date de parution</th> 
</tr> 
</tfoot> 
<tbody> 
<tr> 

<td>ler trimestre 2005</td> 

<td>1270</td> 

<td>1269,50</td> 

<td class="maxi">+4,83</td>0 
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<td>08/07/2005</td> 
</tr> 
<tr> 

<td>4eme trimestre 2004</td> 

<td>1269</td> 

<td>1258,25</td> 

<td>+4,8K/td> 

<td>08/04/2005</td> 
</tr> 
<tr> 

<td>3eme trimestre 2004</td> 
<td>1272</td> 
<td>1244,50</td> 
<td >+4,58</td> 
<td> </td>0 
</tr> 

<!-Suite des donnees --> 
</tbody> 
</table> 
</body> 
</html> 

La figure 14-4 montre le resultat obtenu dans Mozilla. Nous constatons que les bordures 
des cellules sont bien separees, qu'a la deuxieme ligne la definition d'une seule bordure 
plus large a entraine 1' augmentation de la hauteur de toute la ligne et que la cellule vide 
de la derniere colonne est entierement cachee. 
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Les bordures fusionnees 



Quand la propriete border-collapse prend la valeur collapse, les bordures des cellules 
mitoyennes ne sont plus independantes mais elles fusionnent pour n'en faire plus qu'une. 
En utilisant le meme code XHTML que celui de l'exemple 14-3 et en lui appliquant les 
styles suivants : 

<style type="text/css"> 

table{background-color: #EEE; border-collapse: collapse; 

©border: outset 8px red; empty-cells: hide;} 
caption{font-size: 1.2em;border-bottom: red double 3px;margin-bottom: 20px;} 
td,th{ border: double 5px red; background-color: #CCC} 
.maxi (border: double black 20px;} 
</style> 

dans lesquels la valeur de la propriete border-col 1 apse a ete modifiee et prend la valeur 
collapse (repere O) et la propriete border-spacing a ete supprimee, car elle n'a aucun 
effet quand les bordures sont fusionnees, nous obtenons le resultat presente a la figure 14-5, 
oil nous pouvons remarquer que 1' aspect du tableau est tres different de celui de la 
figure 14-4. Notons egalement que la bordure appliquee a la cellule contenant la plus 
grande variation deborde sur l'emplacement des cellules voisines. Dans la pratique, il 
faudrait diminuer nettement sa largeur pour eviter cet effet disgracieux. 



l£f Hardline fiisionrvVs dm tableaux - MoziWii 



Indice du coul de hi construction 



Triinestre 


Indice 


Movenne| Variation annuelle en % 


Date 


ler trimestre 2005 


1270 


12G9 : 50 ||-4,S3 | 


|0S.O7,2005 


4eme trimestre 2004 


1269 


125S : 25 


-4. SI 


08 04 2005 


3eine trimestre 2004 


1272 


1244 : >0 






2 erne trimestre 2001 


1267 


]T>7 1^ 


+3,85 


J5/10/2OO4 


Trimeslre 


Indice 


Muytnnt 


Variation annutlk cn % 


Date dc [nuulion 



■Jt iil LB Hi Oi*« 



Figure 14-5 

Tableau avec des bordures fusionnees 



Dans cet exemple, toutes les bordures des cellules ont le meme style, et l'affichage 
obtenu est uniforme. Dans les cas oil nous definissons des bordures differentes pour des 
groupes de lignes, de colonnes ou des cellules particulieres, il survient des conflits entre 
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ces definitions puisqu'une seule bordure separe desormais ces elements. Ces cas de conflits 
sont resolus de la maniere suivante : 

• Si la propriete border-style d'un element a la valeur hidden, la bordure de cet element 
est toujours cachee, quelle que soit la definition donnee pour l'element voisin. 

• Si la propriete border-style a la valeur none, il faut que toutes les autres definitions 
concernant la meme bordure aient aussi cette valeur none afin que la bordure soit 
cachee, sinon elle reste visible. Si un seul element a une valeur differente de none, alors 
la bordure la plus large est afhchee. En cas d'egalite de largeur et quand la propriete 
border-style a une valeur differente pour les deux cellules voisines, les styles sont 
retenus dans l'ordre de preseance suivant : double, solid, dashed, dotted, ridge, outset, 
groove et i nset. 

• Si les bordures des differents elements ont toutes en commun la meme largeur et le 
meme style, mais simplement une couleur differente, la couleur qui l'emporte est celle 
de l'element situe le plus haut dans l'ordre de priorite defini pour les couleurs de fond, 
que nous avons indique dans une section precedente et dont le schema est represents a 
la figure 14-1. 

L'exemple 14-4 permet de verifier la maniere dont CSS regie les nombreux conflits exis- 
tant dans cette page entre les differents styles de bordures affectes aux cellules d'un 
tableau quand elles sont fusionnees, done quand la propriete border-collapse prend la 
valeur col 1 apse (repere O)- La bordure exterieure de l'ensemble du tableau a une largeur 
de 15 pixels (repere ©) et elle va done l'emporter sur celles des cellules qui ont toutes 
des largeurs inferieures. En revanche, cette bordure disparait autour de la cellule L1C1 
dont la propriete border est definie avec la valeur hi dden (repere 0). Cette valeur cause egale- 
ment l'effacement de la bordure gauche de la cellule L1C2 et de la bordure haute de 
L2C1. La bordure definie pour le selecteur td (repere ©) devrait s'appliquer a toutes les 
autres cellules. II n'en est rien et elle ne s' applique, et encore que partiellement, qu'aux 
cellules L2C1, L2C2, L3C1 et a la quatrieme ligne pour les raisons suivantes : 

• L1C2 a une bordure dont le style double (repere 0) l'emporte sur le style solid a 
epaisseur egale. 

• L1C3 a une bordure gauche ecrasee par celle de L1C2 pour la meme raison et une bor- 
dure basse ecrasee par celle qui est definie pour L2C3 dans la classe .dashed (repere 0), 
car son epaisseur est de 12 pixels. 

• L2C2 a une bordure haute ecrasee par celle de L1C2, une bordure droite dominee par 
celle de L2C3 pour la meme raison que L1C3 et une bordure basse ecrasee par celle de 
L3C2 definie dans la classe .double appliquee a L3C2 et L3C3, et qui l'emporte en 
fonction de son epaisseur de 10 pixels (repere ©). II en est de meme pour les cellules 
L4C2 et L4C3. 

• Le style defini pour la deuxieme colonne (repere 0) ne s' applique en definitive a 
aucune cellule car il est domine par tous les autres, soit par 1' epaisseur superieure, soit 
par le style sol id qui l'emporte sur le style dotted. 



Les styles CSS 



Partie II 



La figure 14-6 montre le resultat obtenu, lequel permet de constater 1' application des 
regies de priorite vues ci-dessus. 

Exemple 14-4. Les conflits entre les bordures voisines 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les conflits de bordures</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" > 
table (border-collapse: collapse©; border: 15px inset yellow©; 

font-size: 1.5em;} 
fllclfborder: hidden;©} 
td {border: 6px solid red; padding: lem;}© 
#llc2 {border: 6px double black;}© 
td. dashed {border: 12px dashed gray;}© 
td. double {border: lOpx double blue;}© 
#col2 {border: 6px dotted black;}© 
</style> 
</head> 
<body> 

<table width="100%"> 
<col width="20%"/> 
<col id="col2" width="30%" /> 
<col width="40X"/> 
<tr> 

<td 1d="llcl"> LI: CI </td> 

<td id="llc2"> L1:C2 </td> 

<td> L1:C3 </td> 
</tr> 
<tr> 

<td> L2:C1 </td> 
<td> L2:C2 </td> 
<td cl ass="dashed"> 
</tr> 
<tr> 

<td> L3:C1 </td> 
<td cl ass="doubl e"> 
<td cl ass="doubl e"> 
</tr> 
<tr> 

<td> L4:C1 </td> 
<td> L4:C2 </td> 



L2:C3 </td> 



L3:C2 </td> 
L3:C3 </td> 
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<td> L4:C3 </td> 
</tr> 
</table> 
</body> 
</html> 
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Determiner la largeur d'un tableau 

La largeur d'un tableau peut etre determinee de plusieurs manieres. Celles-ci different en 
fonction du contenu de ses cellules ou des dimensions donnees explicitement a ces der- 
nieres. Pour determiner cette largeur, les navigateurs utilisent differents algorithmes 
selon la valeur prise par la propriete tabl e-1 ayout dont la syntaxe est la suivante : 

table-layout : auto | fixed | inherit 

Elle s' applique a l'element <tabl e> et a ceux dont la propriete di spl ay a les valeurs tabl e 
ou i nl i ne-tabl e. 

En utilisant la valeur f i xed, la largeur du tableau ne tient pas directement compte du contenu 
de chacune des cellules, mais seulement de la largeur explicite, differente de auto, de 
l'element <tabl e>, de celles des colonnes <col /> et des cellules <td> ou <th>. Cette largeur 
est calculee de la maniere suivante : 

• La largeur de l'element <tabl e> peut etre definie explicitement, soit dans son attribut 
width, soit dans sa propriete width. Toutefois, la definition de cette propriete avec la 
valeur auto ne met pas en oeuvre l'algorithme fixed. 

• Si une colonne de tableau a une largeur explicite definie par sa propriete width (autre 
que auto), cette largeur est utilisee dans l'affichage du tableau. 
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• Quand une cellule de la premiere ligne a une largeur explicite autre que auto, cette 
valeur est utilisee pour toute la colonne a laquelle elle appartient. Dans le cas ou 
cette cellule est la fusion de plusieurs cellules virtuelles (voir le chapitre 6) realisee en 
definissant son attribut col span, et que la ligne suivante contient reellement plusieurs 
cellules, la largeur de la cellule fusionnee est partagee entre chacune des cellules de la 
ligne suivante, de maniere egale. 

• Pour les autres colonnes du tableau qui n'ont pas une largeur definie explicitement par 
une valeur numerique ou si elles ont la largeur auto, l'espace restant est partage equi- 
tablement entre elles (voir l'exemple 14-5). 

Cet algorithme presente l'avantage d'etre plus rapide car seules les largeurs des colonnes 
et des cellules de la premiere ligne sont prises en compte, et le navigateur n' examine pas 
toutes les suivantes pour determiner l'affichage. 

L'exemple 14-5 donne une premiere illustration de ce mecanisme quand la propriete 
tabl e-1 ayout a la valeur fixed (repere ©). Dans ce tableau, la largeur affectee a l'element 
<table> est de 100 % (repere ©). La seule cellule qui se voit affectee une largeur est la 
premiere de la deuxieme colonne par 1' intermediate de la classe . 1 arg qui la determine a 
150 pixels (repere ©). En consequence, les colonnes 1, 3 et 4 (reperes ©, et Q) ont 
pour largeur commune un tiers de celle de 1' ecran, diminuee des 150 pixels de la 
deuxieme colonne, soit pour un ecran de 1 024 pixels : (1 024 - 150) / 3 = 291 pixels, 
valeur arrondie au pixel pres et diminuee des bordures eventuelles. Remarquons que la 
derniere colonne, bien qu'ayant un contenu tres petit, a la meme largeur que les colonnes 
1 et 3. Pour un ecran plus petit, seule la deuxieme colonne garderait une largeur fixe de 
150 pixels, les trois autres se partageant l'espace restant. 

Dans la mesure ou la deuxieme cellule de la premiere ligne est la fusion de deux colon- 
nes (repere 0), les cellules 2 et 3 (reperes et Q) de la seconde ligne se partagent sa 
largeur et font done 75 pixels chacune. L inconvenient de ce partage automatique est 
qu'il ne tient pas compte du contenu des cellules. Dans notre exemple la deuxieme 
cellule de la deuxieme ligne voit son contenu coupe (dans Opera par exemple) ou 
debordant (dans Mozilla et FireFox) sur la cellule suivante selon les navigateurs, car 
aucune cesure des mots n'est effectuee. Ce probleme se regie fheoriquement a l'aide de 
la propriete overf 1 ow qui permet de cacher ou de montrer le debordement (voir le cha- 
pitre 13), mais les navigateurs gerent tres mal ou de facon discordante cette propriete 
pour les cellules. 

Exemple 14-5. Dimensionnement des colonnes dans I'algorithme fixed 

<?xml version="l .0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtrnlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 
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<title>La largeur des tableaux</title> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-l"/> 
<link rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico"/> 
<style type="text/css"> 
table {table-layout: fixed;}© 
td.larg {width: 150px;}@ 
</style> 
</head> 
<body> 

<table width="100Z" border="l">© 
<tr val ign="top"> 

0<td> In principio creavit Deus caelum et terrain terra autem erat inanis et 
vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras appel 1 avitque lucem diem et tenebras noctem 

^» factumque est vespere et </td> 

0<td class="larg" col span="2">XHTML</td> 

0<td> In principio creavit Deus caelum et terrain terra autem erat inanis et 
vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras appel 1 avitque lucem diem et tenebras noctem 
factumque est vespere et </td> 

©<td> CSS 2 </td> 
</tr> 

<tr val ign="top"> 

<td> In principio creavit Deus caelum et terram terra autem erat inanis et 
vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras appel 1 avitque lucem diem et tenebras noctem 
factumque est vespere et </td> 

©<td> XHTML l.Oabcdefghi jk</td> 

©<td> XHTML l.K/td> 

<td> In principio creavit Deus caelum et terram terra autem erat inanis et 
vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas 
dixitque Deus fiat lux et facta est lux et vidit Deus lucem quod esset bona 
et divisit lucem ac tenebras appel 1 avitque lucem diem et tenebras noctem 
^» factumque est vespere et </td> 
<td>CSS 2</td> 
</tr> 
</table> 
</body> 
</html> 
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La figure 14-7 montre le resultat obtenu dans Opera, navigate ur dans lequel le contenu 
debordant est coupe. 
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Quand la propriete table-layout prend la valeur auto, ralgorithme utilise par le navigateur 
precede de la maniere suivante : 

• II calcule pour toutes les cellules la largeur minimale necessaire pour afficher leur contenu. 
Cette largeur minimale peut par exemple correspondre a celle qu'il faut pour afficher 
en entier le mot le plus long d'un texte. Si la propriete width est definie pour une 
cellule et qu'elle est superieure a la largeur calculee precedemment, e'est elle qui 
devient la largeur minimale. 

• II determine la largeur minimale de chaque colonne en fonction de celles des cellules 
qu'elle contient, la plus grande devenant celle de la colonne. Si une propriete width est 
definie pour un element <col /> et qu'elle est superieure a cette valeur minimale, e'est 
elle qui devient la largeur minimale. II suffit done qu'une cellule contienne un objet 
tres large (une image par exemple) pour que la colonne entiere ait cette largeur mini- 
male. Dans ce cas, il est preferable de fusionner des cellules pour en creer une seule 
qui aura ce contenu sans obliger toutes celles de la meme colonne a avoir la meme 
largeur. 



Le style des tableaux 



Chapitre 14 

En reprenant exactement le meme code contenu dans l'element <body> que celui de 
l'exemple 14-5 et en modifiant les styles de la maniere suivante : 

<style type="text/css"> 
table (table-layout: auto;)© 
td.larg {width: 150px;}@ 
</style> 

dans lesquels la propriete table-layout a maintenant la valeur auto, le navigateur deter- 
mine la largeur des colonnes de la facon suivante : 

• La largeur de la deuxieme colonne est determinee en fonction du contenu des cellules 
3 et 4 de la seconde ligne. La somme de ces largeurs donne celle de la cellule fusion- 
nee situee au-dessus des cellules 3 et 4. Cette somme est superieure a la largeur de 
150 pixels definie explicitement pour la cellule fusionnee (repere Q et repere de 
l'exemple 14-5). 

• La largeur de la derniere colonne est la largeur minimale pour contenir le texte 
« CSS 2.1 ». 

• Le reste de la largeur disponible dans le tableau est ensuite partage en deux parties 
egales pour contenir les textes des cellules des colonnes 1 et 3. 

La figure 14-8 montre le resultat obtenu, lequel est tres different de celui de la figure 14-7 
illustrant 1'algorithme fixed. 
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Presentation d'un formulaire 

Les tableaux constituent un bon modele de conteneur pour les elements d'un formulaire. En 
effet, un formulaire presente souvent un aspect general assez similaire, reposant de facon 
classique sur une structure a deux colonnes, la premiere contenant les libelles des champs et 
expliquant la saisie attendue, et la seconde contenant les composants eux-memes. 

L'exemple 14-6 presente une illustration de la creation de styles visant a rendre plus 
attractif un formulaire au niveau de sa presentation. 

Au niveau de la structure XHTML, l'element <form> contient un tableau (repere ©) qui 
inclut lui-meme un titre dans l'element <caption> (repere ©), puis la definition des deux 
colonnes et en particulier de leurs largeurs respectives (reperes © et ©), donnees ici en 
pourcentage. Chaque ligne du tableau contient un libelle dans l'element <label> et un 
composant <input> ou <select> (il pourrait egalement s'agir de <textarea>). Les styles 
choisis ici sont arbitraires et chacun peut y apporter sa touche personnelle. 

Dans la partie qui definit les styles, le tableau est dimensionne a 800 pixels de large, cen- 
tre dans la page en definissant ses marges gauche et droite avec la valeur auto et ses bor- 
dures exterieures sont supprimees (repere ©)• Le titre du tableau est affiche dans une 
taille superieure a celle definie pour le tableau et il est muni de bordures haute et basse 
(repere 0). On definit les marges gauche et droite pour le titre a 1' attention des navigateurs 
qui traitent le titre separement du tableau. 

Toutes les cellules presentent uniquement une bordure basse (repere 0). Les colonnes 
des libelles et des composants sont mises en evidence par une couleur de fond differente 
(reperes Q et 0) et les elements <label> de la premiere colonne se distinguent par les 
styles de police italique et gras (repere ©). L'alignement a droite des libelles dans la pre- 
miere colonne est realise par l'attribut al i gn de l'element <col /> (repere ©). Les naviga- 
teurs de la famille Mozilla ne realisant pas cet alignement, nous pouvons definir une 
classe .droit (repere Q) et l'appliquer a chaque element <td> de la premiere colonne ou 
definir pour chacun d ' eux 1 ' attribut align avec la valeur right. 

Les libelles des champs dans lesquels la saisie est obligatoire sont signales par des cou- 
leurs de fond et de texte differentes du reste de la colonne, en leur appliquant la classe 
.oblig (repere 0). Enfin, le bouton d'envoi (cree par l'element <input> de type submit) est 
signale par une taille de police superieure et une bordure, en utilisant un selecteur de 
valeur d'attribut (repere 0). Ce type de selecteur n'est pas reconnu par Internet Explorer. 

Exemple 14-6. Presentation d'un formulaire 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-l"/> 
<ti tl e>Formul ai re</titl e> 
<style type="text/css"> 
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table (margin-left: auto; margin-right: auto; width: 800px; border: none; 
^■table-layout: fixed; font-size: 16px;}© 
caption {font-size: 1.4em; border-top: 3px blue double; 

border-bottom: 3px blue double; margin-bottom: 20px; 

margin-left: auto; margin-right: auto;}© 
td {border-bottom: 2px solid red;)© 
#libelle {background-color: #EEE;}© 
#composants {background-color: #DDD;}© 
label {font-style: italic; font-weight: bold;}© 
.droit {text-align: right; }/*Pour Mozilla seul*/© 
.oblige {background-color: gray; color: white;}© 

input [type="submit"] {font-size: 1.5em; color: red; border: 2px solid blue;}© 
</style> 
</head> 
<body> 

<form action="exemple7-14.php" method="post" enctype="multipart/form-data"> 
<table cell spaci ng="0"> © 
<caption>Vos coordonnees</caption>© 
<col id="libelle" width="30%" al ign="right'7>© 
<col id="composants" width="70%"/>© 
<tr> 

<td class="oblige" ><label>Nom : </label></td> 
<td><input type="text" name="nom" size="40" maxlength="256" 
value="votre nom" tabindex="l"/X/td> 

</tr> 
<tr> 

<tdXlabel>Prenom : </labelX/td> 

<td><input type="text" name="prenom" size="40" maxl ength="256" 

value="votre prenom" tabindex="2"/X/td> 
</tr> 
<tr> 

<td class="oblige"Xlabel>Mail : </labelX/td> 
<td><input type="text" name="mail" size="40" maxlength="256" 
val ue="votre mail" tabindex="3"/X/td> 

</tr> 

<tr> 

<td><label>Sexe : </labelX/td> 

<td><input type="radio" name="sexe" val ue="homme" tabindex="4"/>Homme 
<input type="radio" name="sexe" val ue="femme" tabindex="5"/>Femme</td> 
</tr> 
<tr> 

<td><label>Votre pays : </labelX/td> 
<td> 

<select name="pays" size="l" tabindex="6"> 
<option value="null"> Votre pays</option> 
<optgroup label="Europe"> 

<option value="France"> France</option> 

<option value="Belgique"> Belgique</option> 
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<option val ue="Ital ie"> Ital ie</option> 
<option value="Allemagne"> Allemagne</option> 
</optgroup> 

<optgroup label="Amerique"> 
<option val ue="USA"> USA </option> 
<option val ue="Canada"> Canada</option> 
<option val ue="Argentine"> Argentine</option> 
</optgroup> 
</select> 
</td> 
</tr> 
<tr> 

<td class="oblige"Xlabel>Code : </label></td> 
<tdXinput type="password" name="code" size="40" maxl ength="6" 
tabindex="7'7X/td> 

</tr> 

<tr> 

<td><l abel >C1 iquez pour envoyer : </labelX/td> 

<tdXinput type=" submit" id="envoi" value="Envoyer" tabindex="8VX/td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

La figure 14-9 montre le resultat obtenu dans Opera. 
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Exercices 

Exercice 1 : Si on definit une couleur de fond rouge pour l'element <tabl e> et bleue pour 
l'element <tr>, quelle est la couleur reellement obtenue ? 

Exercice 2 : Creez les styles pour que les couleurs de chaque ligne d'un meme tableau 
soient differentes. 

Exercice 3 : Creez les styles pour que les lignes paires d'un tableau aient un fond gris 
clair et un texte noir, et que les lignes impaires aient un fond gris fonce et un texte jaune. 

Exercice 4 : Creez un tableau a sept colonnes reparties en trois groupes contenant 
respectivement 2, 3 et 2 colonnes. Appliquez des styles de couleur de fond et de texte 
differents pour chaque groupe. 

Exercice 5 : Mettez en evidence trois cellules d'un tableau dont la couleur de fond est 
verte en definissant des styles propres pour ces cellules au moyen d'une classe, puis de 
selecteurs d'attribut id. 

Exercice 6 : Placer le titre d'un tableau en dessous de celui-ci en l'entourant d'une bordure 
double bleue de 3 pixels. Le texte doit etre ecrit dans une police Arial de 20 pixels. 

Exercice 7 : Creez un tableau dont les bordures des cellules sont de type sol id de 2 pixels 
de large et sont separees les unes des autres. Cachez les cellules vides. 

Exercice 8 : Creez un tableau pour lequel une ligne sur deux est munie de bordures, en 
utilisant le modele des bordures fusionnees. 

Exercice 9 : Incluez les elements d'un formulaire dans un tableau a deux colonnes et 
ecrivez les styles pour que chaque ligne ait une couleur differente selon qu'elle est paire 
ou impaire. 
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De prime abord, les listes peuvent sembler etre des elements mineurs dans la structu- 
ration du contenu d'une page. Cependant, leur utilisation ne se limite pas au simple 
affichage d'un sommaire. Au niveau de la presentation, qu'elle soit ordonnee ou non, 
une liste a un aspect pauvre, et nous pouvons nous en satisfaire dans la mesure oil son 
role est avant tout d'ordre semantique, comme nous l'avons vu au chapitre 3. 
L' aspect esthetique d'une liste doit done etre elabore a l'aide de styles CSS. Nous 
allons voir dans ce chapitre que les differents rendus visuels d'une liste peuvent etre 
tres varies tant au niveau des differentes possibilites de numerotation que s'agissant 
du choix des puces dans les listes non ordonnees. Les listes sont egalement tres en 
vogue pour la creation des menus d'un site, et e'est sur ce point que nous terminerons notre 
etude. 



La numerotation des listes 

Par defaut, la numerotation des items <1 i > inclus dans un element <ol > s'effectue en chif- 
fres arabes. Nous pouvons faire varier cette numerotation en attribuant un style a 1' element 
<ol > a l'aide de la propriete 1 ist- style- type dont la syntaxe est : 

1 i st-style-type : <type> | none | inherit 

Plus generalement, cette propriete ne s'applique qu'aux elements de listes (<ol >, <ul > 
ou <1 i>) ou a ceux pour lesquels on a defini la propriete displ ay avec la valeur 1 i st- 
item. 
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Pour les listes ordonnees, le parametre <type> peut prendre une des valeurs suivantes : 

• decimal : numerotation en chiffres arabes : 1, 2, 3. . . C'est la valeur par defaut. 

• decimal -leading-zero : idem, mais les nombres inferieurs a 10 sont precedes d'un 
zero : 01, 02, 03. . . Cette valeur n'est pas prise en compte par Internet Explorer. 

• upper-latin ou upper-alpha : numerotation alphabetique en majuscules : A, B, C... 

• lower-latin ou 1 owe r- a 1 pha : numerotation alphabetique en minuscule : a, b, c... 

• upper-roman : numerotation en chiffres remains majuscules I, II, III, IV... 

• 1 ower-roman : numerotation en chiffres remains minuscules i, ii, hi, iv. . . 

• lower-greek : numerotation en caracteres grecs minuscules , a, (3, \|/... Cette valeur 
n'est pas prise en compte par Internet Explorer. 

• georgian : numerotation en caracteres georgiens. Cette valeur n'est pas prise en 
compte par Internet Explorer. 

• armenian : numerotation en caracteres armeniens. Cette valeur n'est pas prise en 
compte par Internet Explorer. 

La valeur none permet de supprimer toute numerotation. On peut l'utiliser pour conser- 
ver la semantique des listes sans aucune numerotation. La valeur inherit permet 
d'obtenir explicitement la meme numerotation que celle de l'element parent, ce qui est 
applique par defaut car la propriete est heritee. L'exemple 15-1 nous permet de mettre 
en oeuvre toutes les differentes possibilites de numerotation pour des listes ordonnees 
imbriquees sur deux niveaux, en appliquant des numerotations differentes pour chacun 
d'eux. II contient quatre fois le meme code XHTML de creation des memes listes 
imbriquees (reperes ©, ©. © et ©), chacune d'elles ayant un premier element <ol> 
muni d'un identifiant id specifique afin de lui appliquer un style propre, independamment 
des autres listes. Dans la definition des styles, le premier selecteur (par exemple #deci) 
permet de creer le style des items de premier niveau, et le second (par exemple #deci 1 i o 1 ) 
celui des items imbriques. La premiere liste est numerotee avec les styles decimal et 
decimal -leading-zero (reperes et 0). La deuxieme avec les styles upper-roman et 1 ower- 
roman (reperes © et 0). La troisieme utilise les styles upper-latin et lower-greek 
(reperes Q et 0) et la derniere les styles exotiques armenian et georgian (reperes et 0). 
Le contenu des elements de premier niveau est egalement mis en evidence en utilisant 
la propriete font-weight pour les afficher en gras. Notez que l'utilisation des attributs 
id ne serait pas necessaire s'il n'y avait qu'une liste dans la page ou si nous voulions 
les numeroter toutes de la meme facon. Nous pourrions en effet ecrire simplement la 
definition des styles suivante (repere 0) : 

ol {list-style-type:decimal ; font-weight: bold; } 

ol li ol {1 ist-styl e-type:decimal -1 eading-zero; font-weight:lighter;} 
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Exemple 15-1. La numerotation des listes ordonnees 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les styles des listes ordonnees</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="Listes"> 

/*Si la liste est unique dans la page, on peut ecrire: 

ol {1 ist-style-type:decimal ; font-weight: bold; } 

ol li ol {list-style-type:decimal-leading-zero; font-weight : 1 ighter; }*/© 
#deci {1 i st -style- type: decimal ; font-weight: bold; }Q 

#deci li ol {list-style-type:decimal-leading-2ero;font-weight:lighter; }© 
#roman{l i s t-sty 1 e- type: upper- roman; font-weight: bold; }Q 
#roman li ol {list-style-type:lower-roman;font-weight:lighter; }© 
#grec{list-style-type:upper-latin;font-weight:bold; }© 
#grec li ol {list-style-type:lower-greek;font-weight:lighter; }Q 
#armenie {list-style-type:armenian;font-weight:bold; }© 
#armenie li ol {1 i st-styl e-type:georgi an ;font-weight: 1 ighter ; Q 
</style> 

</head> 

<body> 

<hl>Liste ordonnee decimal puis decimal -1 eading-zero</hl> 
<ol id="deci">© 
<li> XHTML 1.0 
<ol> 

<li> DTD transitional </li> 
<li> DTD strict </li> 
<li> DTD frameset </li> 
</ol> 
</li> 

<li> XHTML 1.1 
<ol> 

<1 i >DTD unique </li> 
</ol> 
</li> 
<li> CSS 
<ol> 

<li> CSS 1 </li> 
<li> CSS 2 </li> 
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<li> CSS 2.1 </li> 
</ol> 
</H> 
</ol> 

<hl>Liste ordonnee upper-roman puis 1 ower-roman</hl> 
<ol id="roman">© 

<!-MEMES ELEMENTS DE LISTES --> 
</ol> 

<hl>Liste ordonnee upper-latin puis 1 ower-greek</hl> 
<ol id="grec">© 
<!- MEMES ELEMENTS DE LISTES --> 

</ol> 

<hl>Liste ordonnee armenian puis georgian</hl> 
<ol id="armenie">© 

<!- MEMES ELEMENTS DE LISTES --> 
</ol> 
</body> 
</html> 

Les figures 15-1 et 15-2 illustrent les resultats obtenus pour ces differents styles de nume- 
rotation. 
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Figure 15-2 
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Les items d'une liste sont affiches par defaut en retrait par rapport au bord gauche de leur 
conteneur, laissant apparaitre une marge gauche. Les caracteres utilises pour les numero- 
ter font normalement partie integrante du texte des items comme s'ils etaient ecrits en 
tant que contenu des elements <1 i >. II est possible d'intervenir sur la position horizontale 
de ces caracteres (chiffres ou lettres) en definissant la propriete 1 ist-style-position dont 
la syntaxe est la suivante : 

1 i st-style-posi tion : inside | outside | inherit 

• Avec la valeur inside, les caracteres de la numerotation sont places dans la marge de 
retrait du texte de l'item. 

• Avec la valeur outsi de, qui est la valeur par defaut, ces caracteres sont integres au texte 
de l'item. 

• La valeur i nheri t permet de definir explicitement le style de l'element parent mais la 
propriete est de toute facon heritee par defaut. 

Dans l'exemple 15-2, le code des listes imbriquees est semblable a celui de l'exemple 15-1 
(reperes et ©). Le style du premier niveau de liste est upper- roman et celui du second 
est lower-latin (reperes O et ©, puis © et ©). Nous definissons successivement la 
position inside pour la premiere liste (repere O) et outside pour la seconde (repere ©). 
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Les definitions d'alignement des elements de liste de second niveau sont ici explicites 
bien que la propriete 1 i st-styl e-posi ti on soit heritee, car certains navigate urs gerent mal 
cet heritage. 



Exemple 15-2. Le positionnement des numerotations 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les styles des listes ordonnees</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" title="Listes"> 

ol {list-style-type:upper-roman;border:solid red 2px;font-weight:bold; 

^♦li st-styl e-posi ti on: inside; background -col or :#EEE; O 

ol li ol {1 i st-styl e-type: 1 ower-1 atin ;font-weight : 1 i ghter ; 

^♦1 i st-styl e-posi ti on: inside }© 

#out{list-style-type:upper-roman;border:solid red 2px; font-weight: bold; 

^»li st-styl e-posi ti on: outside; background- col or :#EEE; }© 

#out li ol {list-style-type:lower-latin;border:solid red 2px; 

^•font-weight :1 i ghter ; 1 i s t-sty 1 e-posi t ion: outside; }© 
</style> 
</head> 
<body> 

<hl>Numerotation inside</hl> 
<ol>0 
<li> XHTML 1.0 
<ol> 

<li> DTD transitional </li> 
<li> DTD strict </li> 
<li> DTD frameset </li> 
</ol> 
</li> 

<li> XHTML 1.1 
<ol> 

<li> DTD unique </li> 
</ol> 
</li> 
<li> CSS 
<ol> 

<li> CSS 1 </li> 



Le style des listes J 

Chapitre 15 | 

<1T> CSS 2 </li> 
<11> CSS 2.1 </li> 
</ol> 
</li> 
</ol> 

<hl>Numerotation outside</hl> 
<ol id="out">© 
<!-Les memes elements de liste que ci-dessus--> 
</ol> 
</body> 
</html> 

Sur la figure 15-3, nous pouvons constater les differences d'alignement des symboles de 
numerotation dues a l'utilisation des valeurs inside et outside. 
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I Les styles CSS 

I Partie II 

La creation de compteurs 

Les proprietes que nous venons d'etudier permettent de faire varier le type de nume- 
rotation des listes. Elles ne sont cependant pas adaptees, pour les listes imbriquees, a 
la realisation de numerotations complexes tenant compte du symbole du niveau prece- 
dent. En particulier, elles ne permettent pas de creer des numerotations du type « I. A, 
LB, I.C » ou meme d'inserer un mot avant la numerotation pour obtenir automati- 
quement des listes identifiees par des en-tetes du type « Chapitre 1, Chapitre 2... ». 
Ce type de numerotation est adapte a la creation de pages dynamiques dont le contenu 
repond a une demande du visiteur, et dont le nombre d'items ne peut etre connu a 
l'avance. 

Pour parvenir a ce type de resultats et a d'autres variantes, CSS offre plusieurs proprietes 
qui doivent etre utilisees de concert. 



Prise en charge par les navigateurs 

Notez cependant qu'a ce jour, tres peii de navigateurs implemented completement ces proprietes. 
Pour les exemples qui vont suivre, seul le navigateur Opera est capable de restituer I'effet recherche, 
Mozilla, FireFox et meme Amaya (le navigateur pourtant cree par le W3C !) en etant incapables. Pour 
obtenir des effets visibles par tous, et en attendant une prise en charge plus complete, il sera preferable 
d'utiliser une programmation dynamique des pages, avec PHP ou ASP, qui fait appel a des boucles 
successives. En depit de ces soucis de prise en charge, I'etude des compteurs n'est pas sans interet. 



La procedure a suivre comporte plusieurs etapes. II faut tout d'abord declarer et initiali- 
ser un compteur. L'etape suivante consiste a definir la maniere dont le compteur va etre 
increments. La phase finale permet d'afficher le contenu genere dans les listes. 

On effectue la declaration et 1' initialisation du compteur a l'aide de la propriete counter- 
reset dont la syntaxe est la suivante : 

counter-reset : [<identifiant> N ?]+ | none | inherit 

L'identifiant du compteur est un nom arbitraire choisi par le programmeur comme c'est 
le cas pour l'attribut id. Si l'identifiant est le seul parametre defini, le compteur est initia- 
lise a et le premier item de la liste est numerate avec la valeur 1 (ou le caractere corres- 
pondant au style alphabetique choisi). S'il est suivi d'un entier N, la numerotation com- 
mence avec la valeur N + 1 (ou la N + l e lettre). Les valeurs negatives de N sont admises 
a partir de - 32 768. On evitera ces valeurs negatives pour les numerotations alphabeti- 
ques ou romaines qui risquent de donner des resultats incoherents. En ecrivant par exemple 
les styles suivants : 

ol {counter-reset :partie ;} 



les items de la liste sont numerates 1, 2, 3. . . ou A, B, C. 
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Comme l'indique le symbole + de la syntaxe, il est possible de declarer plusieurs comp- 
teurs dans la meme propriete. En ecrivant la declaration suivante : 

ol {counter-reset ipartie 2 chapitre -1 paragraphe 7 ;} 

le compteur nomme « chapitre » commence au numero 3, le compteur nomme « chapitre » 
a 0, et celui nomme « paragraphe » a la valeur 8. 

La deuxieme etape definit 1' incrementation du compteur. C'est la propriete counter- 
increment qui permet cette operation. Sa syntaxe est la suivante : 

counter-increment : [<identifiant> <N>]+ | none | inherit 

L'identifiant est celui d'un des compteurs declares et l'entier facultatif qui le suit indique 
le pas de 1' incrementation (la valeur ajoutee a chaque etape et qui vaut 1 par defaut). II est 
possible mais rare de definir plusieurs identifiants dans la meme propriete. Le selecteur 
utilise dans la declaration du style va preciser a quels elements s' applique le compteur. II 
faut en regie generale utiliser un selecteur par niveau de numerotation, et done aussi par 
compteur. 

En ecrivant les styles suivants : 

ol {counter-reset : partie ;} 

ol 1 i {counter-increment :partie 2 ;} 

le compteur est remis a pour chaque nouvel element <ol> et les items <li> sont nume- 
rates de 2 en 2 a partir de 2. 

A ce stade, rien ne s'affiche devant chaque item si ce n'est la numerotation habituelle. 
Si Ton veut creer une numerotation particuliere, il est souvent preferable de supprimer 
la numerotation habituelle en donnant a la propriete list-style-type qu'on utilise la 
valeur none. 

Pour afficher le compteur, nous devons associer aux deux proprietes precedentes la pro- 
priete content que nous avons deja rencontree et qui va generer le contenu du compteur 
en etant associee aux pseudo-elements : before ou rafter. 

Pour son utilisation avec des compteurs, sa syntaxe se reduit a la forme suivante : 

content :[<chaine> | counterO ]+ [ inherit 

La chaine inseree peut etre un texte quelconque entre guillemets doubles, comme nous 
l'avons deja vu par ailleurs. C'est la fonction counterO, qui recoit comme premier 
parametre l'identifiant du compteur, qui va permettre l'affichage des numerotations et qui 
peut recevoir un second parametre facultatif pour designer le style de la numerotation 
voulue, avec les memes mots-cles que ceux de la propriete list-style-type. Dans la 
meme propriete content, nous pouvons utiliser plusieurs chaines et plusieurs fonctions 
countert ). 

Lexemple 15-3 constitue notre premiere illustration des compteurs. II contient une liste 
des noms des villes olympiques entre 1992 et 2012 (repere ©). Notre objectif est d'affi- 
cher chaque item precede du mot « Olympiade », puis de l'annee des jeux, generee auto- 
matiquement et du caractere deux-points (:). Pour y parvenir, nous creons tout d'abord un 
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compteur nomme « jeux » et initialise a la valeur 1988 (repere ©). On definit une taille de 
caracteres pour les items de la liste (repere O) et on attribue a la propriete list-style- 
type la valeur none pour supprimer la numerotation habituelle non desiree en tete des 
items (repere ©). La liste n'ayant qu'un niveau, le selecteur utilise est ol 1 i : before. Le 
compteur est increments de 4 unites pour chaque item a l'aide de la propriete counter- 
increment (repere ©) et la propriete content permet de generer le contenu qui va figurer 
devant chaque item a l'aide de la fonction counter ( ) (repere 0). 

Exemple 15-3. Numerotation automatique 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Numerotation</title> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 
<style type="text/css" title="Listes"> 
li {font-size: 1.5em;}© 

ol {counter-reset: jeux 1988 @; list-style-type: none;©} 

ol 1 i :before{counter-increment: jeux 4 ©;content:"01ympiade " counter( jeux) " : ";0) 
</style> 
</head> 
<body> 

<hl>Jeux 01ympiques</hl> 
<ol>© 

<li> Barcelone </li> 

<li> Atlanta</li> 

<li> Sydney</li> 

<li> Athenes</li> 

<li> Pekin</li> 

<li> Londres</li> 
</ol> 
</body> 
</html> 

La figure 15-4 montre le resultat obtenu dans Opera 8.0, qui correspond bien a notre 
attente. Les autres navigateurs se contentent d'afhcher une numerotation de 1 a 6, mais 
ils ne manqueront pas de se mettre a la page un jour ! 

Notre second exemple (exemple 15-4) permet de generer une numerotation personnalisee 
plus complexe car elle s' applique a une liste imbriquee sur deux niveaux (repere ©). 
Nous voulons faire apparaitre le mot « Partie » suivi d'une numerotation en chiffres 
romains majuscules devant les items du premier niveau, puis le mot « Chapitre » suivi du 
chiffre precedent et d'une numerotation decimale des items de second niveau (du type 
1.1,1.2, etc.). 
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Jeux Olympiques 

Olympiade 1 992 : Rarcelone 
Olympiade 1 996 : Atlanta 
Qhmpiade 2000 : Sydney 
Olympiade 2004 : Athenes 
Olympiade 2008 : Pekm 
Olympiade 2012 : Londres. 



Apres la definition d'une taille de police differente pour mettre en evidence les items de 
chaque niveau (reperes O et ©), nous creons les compteurs nommes « titrel » (repere Q) 
et « titre2 » (repere ©), puis nous supprimons la numerotation classique (repere 0). 
Pour le premier niveau, le selecteur utilise est ol 1 i : before, pour lequel nous definissons 
1' incrementation du premier compteur (repere ©) et le contenu genere par la propriete 
content dans laquelle nous precisons le style de numerotation souhaite comme second 
parametre de la fonction countert ) (repere ©). Pour les items de second niveau, le selec- 
teur est ol 1 i ol 1 i : before pour lequel nous incrementons le second compteur (repere 0), 
puis nous creons le contenu genere qui utilise ici deux fois la fonction counterO avec 
deux parametres, ainsi que deux chaines de caracteres (repere 0). 

Exemple 15-4. Les compteurs sur plusieurs niveaux 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les compteurs automatiques</titl e> 

<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" title="Listes"> 

<!-- Fontes --> 

ol li{font-size:1.5em;}0 

ol li ol {font-size:O.5em;}0 

<!-- Compteurs --> 

ol {counter-reset: titrel 0;counter-reset:titre2 0;list-style-type: none;}0 
ol li :before{counter-increment: titrel 0;content: "Partie " 
^•counter(titrel .upper-roman) " : ";©} 

ol li ol 1 i :before{counter-increment: titre2 0;content: "Chapitre " 
*»counter(titrel , upper-roman) "." counter(titre2, decimal ) " : ";©} 
</style> 
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</head> 
<body> 

<hl>Numerotation automatique</hl> 
<ol>© 
<li> XHTML 1.0 
<ol> 

<li> DTD transitional </li> 
<li> DTD strict </li> 
<li> DTD frameset </li> 
</ol> 
</li> 

<li> XHTML 1.1 
<ol> 

<1 i> DTD unique </l i> 
</ol> 
</li> 
<li> CSS 
<ol> 

<li> CSS 1 </li> 
<li> CSS 2 </li> 
<li> CSS 2.1 </li> 
</ol> 
</li> 
</ol> 
</body> 
</html> 



La encore, le resultat presents a la figure 15-5 ne peut etre obtenu pour l'instant que dans 
le navigateur Opera 8. 
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La methode precedente necessite d'ecrire un nouveau selecteur pour chaque niveau de la 
liste imbriquee, ce qui implique des selecteurs complexes si on augmente le nombre de 
niveaux. Si on peut se contenter du meme style pour tous les niveaux d' items, il est pos- 
sible de simplifier la procedure precedente en n'utilisant qu'un seul selecteur et un seul 
compteur. Celui-ci est reinitialise independamment a chaque niveau de la liste qui peut 
alors en contenir autant que souhaite. Pour creer cette fonctionnalite, il faut encore utili- 
ser les memes proprietes counter-reset et counter-increment, et simplement remplacer la 
fonction counterO par countersO qui peut avoir de un a trois parametres. Le premier 
parametre est a nouveau le nom du compteur, le deuxieme est la chaine qui va separer 
chaque numerotation de niveau et le troisieme le style de la liste qui est done unique pour 
tous les niveaux. 

Nous mettons en oeuvre cette methode dans l'exemple 15-5 dont le code XHTML est 
compose d'une liste numerotee a trois niveaux d'imbrication (les reperes ©. et © 
identifient chacun des niveaux). La declaration des styles est tres simple car elle ne 
contient que deux elements. Le premier initialise le compteur nomme « titres » implicite- 
ment a avec la propriete counter-reset et supprime la numerotation par defaut en don- 
nant la valeur none a la propriete 1 i st-styl e-type (repere Q). Le second definit le contenu 
du compteur avec la chaine Niveau suivie de la numerotation creee par la fonction 
countersO utilisee avec trois parametres, qui sont respectivement le nom du compteur 
unique, la chaine de separation "." et le style de la numerotation decimale (repere ©). 
Le compteur est ici explicitement increments de une unite a chaque etape (repere ©). 

Exemple 15-5. Numerotation automatique des listes pour un nombre quelconque de niveaux 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Les compteurs automatiques</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset^i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=" . ./images/favicon.ico" /> 
<style type="text/css" title="Listes"> 
<!-- Compteurs --> 

ol (counter-reset: titres;list-style-type: none;}© 
1 i :before{content: "Niveau " counters(titres .decimal ) " : 
©;counter-increment: titres 1;©} 
</style> 
</head> 
<body> 
<ol>© 
<li> XHTML 1.0 
<ol>© 

<li> DTD transitional 
<ol>© 

<1 i>Introduction</l i> 
<li>Elements</li> 



Les styles CSS 



Partie II 



<li>Attributs</li> 
</ol> 
</li> 
<li> DTD strict 
<ol>© 
<1 i>Introduction</l i> 
<li>Elements</li> 
<li>Attributs</li> 
</ol> 
</li> 
<li> DTD frameset 
<ol>© 
<1 i>Introduction</l i> 
<li>Elements</li> 
<li>Attributs</li> 
</ol> 
</li> 
</ol> 
</li> 

<li> XHTML 1.1 
<ol>© 

<li> DTD unique 
<ol>© 
<1 i>Introduction</l i> 
<li>Elements</li> 
<li>Attributs</li> 
</ol> 
</li> 
</ol> 
</li> 
<li> CSS 
<ol>0 
<li> CSS 1 
<ol>© 
<li>Introduction</li> 
<1 i>Proprietes</l i> 
<li>Valeurs</li> 
</ol> 
</li> 
<li> CSS 2 
<ol>0 
<1 i>Introduction</l i> 
<li>Elements</li> 
<li>Attributs</li> 
</ol> 
</li> 
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<li> CSS 2.1 
<ol>© 

<1 i>Introduction</l i> 
<li>Elements</li> 
<li>Attributs</li> 
</ol> 
</li> 
</ol> 
</H> 
</ol> 
</body> 
</html> 

La figure 15-6 presente le resultat obtenu pour notre liste a trois niveaux d' imbrication. 
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Les listes a puces 

En XHTML, la disparition des attributs de presentation des listes a puce oblige, et c'est 
une bonne chose, a utiliser des proprietes CSS pour diversifier les puces afhchees dans 
les listes creees avec l'element <ul>. L'unique puce disponible par defaut est un disque 
noir mais il est possible de personnaliser les puces grace a la propriete list-style-type 
deja utilisee pour les listes numerotees. Les puces prennent toujours la couleur du texte 
qui les suit, tel que cela est defini par la propriete col or. 

Les puces predefinies 

Pour les listes a puces, la syntaxe de la propriete list-style-type est simplified et se 
resume a ceci : 

list-style-type:disc | circle | square | none | inherit 

• di sc : la puce est un disque plein (c'est la valeur par defaut) ; 

• ci rcl e : la puce est un cercle ; 

• square : la puce est un carre plein ; 

• none : pas de puce. 

L'exemple 15-6 montre la creation de divers styles pour les differents niveaux de listes a 
puces imbriquees sur deux niveaux. Tous les items de premier niveau disposent d'une 
puce carree definie par la valeur square de la propriete 1 i st-styl e-type pour les elements 
<ul> (repere O)- S'agissant de definir une puce circulaire pour les items de second 
niveau, il faut utiliser le selecteur ul ul et la valeur ci rcl e pour la meme propriete (repere ©). 
Des couleurs de fonds et des tailles de polices differentes sont egalement definies pour 
chacun des selecteurs afin de mettre en evidence les imbrications. 

Exemple 15-6. Listes a puces classiques 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 
<head> 

<title>Styles des listes a puces </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css" title="Les listes"> 

ul{ font-si ze:1.5em;background-color:#CCC;list-styl e-type: square;}© 
ul ul {font-size:0.8em; background- col or:#EEE;l i st-styl e-type :ci rcle; }© 
</style> 

</head> 

<body> 

<hl>Li stes a puces cl assiques</hl> 
<ul> 
<li> XHTML 1.0 
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<ul> 

<li> DTD transitional </li> 
<li> DTD strict </li> 
<li> DTD frameset </p></li> 
</ul> 
</li> 

<li> XHTML 1.1 
<ul> 

<li> DTD XHTML 1.1 unique</li> 
</ul> 
</li> 
<li> CSS 
<ul> 

<li> CSS 1 </li> 
<li> CSS 2 </li> 
<li> CSS 2.1</li> 
</ul> 
</li> 
</ul> 
</body> 
</html> 

La figure 15-7 presente le resultat obtenu. 
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Figure 15-7 

Une liste imbriquee 
a puces classiques 





La propriete list-style-position peut egalement etre mise a profit pour les listes a puces. 
On peut ainsi determiner si l'alignement des puces des items figurera en retrait (avec la 
valeur outside) ou non (avec la valeur inside). 
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Les puces graphiques 

La pauvrete de l'eventail des puces disponibles est telle que la mise en oeuvre de puces 
graphiques personnalisees s'impose vite. Ce ne sont rien d'autres que des images de 
petite taille (souvent des icones de type GIF) nous permettant d'utiliser des motifs et des 
couleurs plus varies. Cette creation de style s'effectue avec la propriete 1 1 st-styl e- image, 
dont la syntaxe est : 

1 i st -style- image :<uri> | none | inherit 

Elle peut etre appliquee aux elements <ul > et <ol > et a tous ceux dont la propriete di spl ay 
a la valeur 1 i st-i tern (nous y reviendrons plus en detail dans ce chapitre). 

Le parametre <uri > donne l'adresse relative ou absolue de l'image qui va servir de puce. 
II est recommande de toujours faire suivre la propriete list-style-image de la propriete 
1 i st-styl e-type, ce qui peut paraitre a priori inutile, alors que cela fournit une solution de 
remplacement si l'image est introuvable ou corrompue. Dans tous les cas, si l'image est 
accessible, la seconde definition est ignoree. 

Dans l'exemple 15-7, nous creons une liste a puces a deux niveaux (premier niveau, 
repere © et second niveau, repere ©). Le selecteur du premier niveau est ul , et il est mis 
en evidence par une taille de caracteres de 1,5 cm (repere O) P u i s par une puce consti- 
tute par l'image d'un drapeau (repere ©), et enfin par une definition de style de puce 
ronde en remplacement eventuel de l'image (repere ©). Le selecteur du second niveau 
est ul ul pour lequel la taille de la police est plus petite (repere ©). L'image de la puce 
est differente de celle du niveau superieur (repere 0) et le style de remplacement est une 
puce classique carree (repere ©). 

Exemple 15-7. Les listes a puces graphiques 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<title>Styles des listes a puces </title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css" title="Les listes"> 

ul {font -si ze: 1 . 5em ©;1 i st-styl e- image : url ( . . /i mages /drapeauf r .gif )©; 
*»1 i st-styl e-type: disc;©) 

ul ul {f ont-si ze :0.8em©;li st-styl e-i mage: url ( . . /images /f leche.gif )©; 

*»1 i st-styl e-type: square;©} 

</style> 
</head> 
<body> 

<hl>Listes a puces cl assiques</hl> 
<ul>© 
<li>  XHTML 1.0 
<ul>© 
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<li> DTD transitional </li> 
<li> DTD strict </li> 
<li> DTD frameset </p></li> 
</ul> 
</li> 

<li>  XHTML 1.1 
<ul>© 

<li> DTD XHTML 1.1 unique</li> 
</ul> 
</li> 

<li>  CSS 
<ul>© 

<li> CSS 1 </li> 
<li> CSS 2 </li> 
<li> CSS 2.1</li> 
</ul> 
</li> 
</ul> 
</body> 
</html> 

La figure 15-8 montre le resultat obtenu. On notera encore que la taille des images utili- 
sees doit etre prealablement adaptee au contexte, car il n'est pas possible d'intervenir sur 
ses dimensions avec une propriete CSS. 
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Les listes mixtes 

Une liste mixte est une liste a plusieurs niveaux dans laquelle on definit par exemple des 
puces graphiques pour le premier niveau et des puces classiques pour le second. En 
reprenant le code XHTML de l'exemple 15-7 en vue de creer ce genre de liste, nous 
pourrions definir les styles suivants : 

<style type="text/css" title="Les listes"> 
ul (font-size: 1 . 5em; 1 i st-styl e- image: url ( . . /i mages /drapeauf r . gif )©; 
*»1 i st-styl e- type: disc; } 

ul ul {font-size:0.8em;l i st-styl e- type: square;©} 
</style> 

Nous pourrions done nous attendre a ce que les items de premier niveau soient precedes 
d'une image GIF (repere Q) et ceux de second niveau d'une puce ordinaire carree 
(repere ©). Or, il n'en est rien, et les deux niveaux sont affiches avec la puce graphique 
de l'image « drapeaufr.gif ». Cela provient de ce que la propriete 1 i st-styl e-image est heri- 
tee par les elements enfants, meme apres la definition d'un style different par la propriete 
1 i st-styl e-type dans le selecteur ul ul (repere ©). 

Pour pallier cet inconvenient, il faut definir explicitement 1' absence d'image pour le 
second niveau en ecrivant les styles suivants dans lesquels la propriete 1 i st-styl e-image a 
la valeur none (repere ©), le reste etant inchange : 

<style type="text/css" title="Les listes"> 

ul (font-size: 1 . 5em; 1 i st-styl e-image : url ( . . /images /drapeauf r .gif ) ; 
^»1 i st-styl e-type: disc; } 

ul ul (font-size:0.8em;l i st-styl e- image: none O: 1 i st-styl e-type: square; } 
</style> 

Dans ce cas seulement, nous obtenons le resultat presente a la figure 15-9. 
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Affichage des listes en ligne 

Les elements XHTML de liste <ol> et <ul> employes precedemment sont tous affi- 
ches sous forme d'un item par ligne avec un comportement identique aux elements 
de type bloc. II est possible de modifier ce comportement en utilisant la propriete 
display et en lui attribuant la valeur inline. Dans ce cas, les items d'une liste s'affi- 
chent sur la meme ligne les uns derriere les autres comme les mots d'un texte. Nous 
allons utiliser cette technique pour creer un menu horizontal tel que celui presente a 
la figure 15-10. 
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L'exemple 15-8 contient le code de creation d'un tel menu. La structure est constitute 
a partir d'une liste ordonnee <ol> (repere ©) contenant cinq items <1 i> (reperes ©, ©, 
©. © et ©) renfermant chacun un lien, comme il se doit dans un menu. Pour le selec- 
teur ol nous definissons la propriete text-al i gn qui permet le centrage du contenu de la 
liste dans la page, quelle que soit la largeur de la fenetre (repere O)- Pour creer un 
cadre general aux items, nous definissons egalement une bordure basse (repere ©), une 
couleur de fond pour ol (repere ©) et nous annulons la marge gauche inherente aux lis- 
tes (repere ©). C'est pour le selecteur 1 i que nous pouvons creer tous les styles avec 
lesquels nous obtenons le menu horizontal. La propriete display qui prend la valeur 
inl ine permet d'obtenir l'affichage des items sur une seule ligne (repere 0) et l'attri- 
bution de la valeur none a la propriete list-style-type supprime toute numerotation 
(repere ©). Les proprietes font-size (repere ©), background-color (repere ©) et pad- 
ding (repere ©) concourent a ameliorer la presentation du menu mais ne sont pas 
necessaires. II en va de meme de la definition des bordures droites (repere ©) et basses 
(repere ©) pour chaque element du menu, qui permettent de donner un aspect de relief 
a chaque occurrence. La feuille de style se termine par les definitions facultatives de la 
couleur des liens <a> (repere ©) et de la presentation du titre principal <hl> qui joue le 
role de bandeau en haut de la page (repere ©). 
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Exemple 15-8. Creation d'un menu horizontal a partir d'une liste 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<title>Construction d'un menu horizontal</title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css" title="Menu"> 
ol {text-al ign: center©; background-color:#FCO@;border-bottom: 2px 
*»sol i d #000©;margin-left: 0;©} 

1 i {di spl ay : inl ine©; 1 i st-style-type: none©; font-size:18px©; 
^»background-color:#EEE@; padding:5px 20px 5px 20px@; border-right:2px solid 
*-#AAA©; border-bottom: 2px solid #AAA;©} 
li a{color:navy ; ©} 

hl{text-al ign:center; border-top:2px solid #AAA; border-bottom: 2px solid #AAA; 
^»font-size:44px; font-style:obl ique; }© 
</style> 
</head> 
<body> 

<hl>Les technologies du Web</hl> 
<ol>© 

<li><a href="http://www. w3.org" tabindex="l" accesskey="A" title="Specifications 
*»XHTML 1.0" >XHTML 1.0</aX/li>© 

<li><a href="http://www.funhtml .com" tabindex="2" accesskey="B" 
*-title="Specifications XHTML 1.1">XHTML l.K/aX/li>© 
<li><a href="http://www. w3.org/TR/CSS21/" tabindex="3" accesskey="D" 
*»title="Specifications CSS 2.1">CSS 2.1</aX/li>© 

<li><a href="http://www. php.net" tabindex="4" accesskey="G" title="PHP">PHP 
*»</aX/li>© 

<li><a href="http://www.mysql .org" tabindex="5" accesskey="H" 
*-title="MySQL">MySQL</aX/li>© 
</ol> 
</body> 
</html> 

L' aspect obtenu presente a la figure 15-10 est similaire dans presque tous les navigateurs, 
a 1' exception de Internet Explorer dans lequel la separation entre chaque item n'existe 
pas. Le code de l'exemple 15-8 peut facilement etre reutilise. En effet, il suffit d'ajouter 
des elements <1 i > pour l'enrichir et obtenir par exemple le resultat presente a la figure 15-11 
sans effectuer aucune modification dans les definitions de styles. 

Du point de vue structurel, il serait parfaitement possible de remplacer l'element <ol > par 
<ul >, la liste n'ayant aucun caractere de numerotation. 
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Adaptation du menu horizontal 



Affichage d'elements divers sous forme de liste 

Tout comme la propriete di spl ay permet d'afficher des elements <ol > ou <ul > comme des 
elements de type en ligne, il est possible de l'utiliser pour afficher sous forme de liste 
des elements qui ne le sont pas habituellement. Pour realiser ce type d'affichage, il faut 
definir pour l'element choisi la propriete di spl ay avec la valeur Hst-i tem. Nous pouvons 
ensuite definir des styles speciflques aux listes pour ces elements. Cette methode s' appli- 
que bien sfir davantage a des elements XML dont le role est purement semantique qu'a 
des elements XHTML qui ont deja une signification predefinie. L'exemple 15-9 en est 
une premiere illustration, qui permet l'affichage de cinq elements <h2> (reperes ©. ©, ©, 
© et ©) sous forme d'une liste dont l'aspect est celui d'un menu vertical. Pour parvenir 
a ce resultat, nous definissons pour le selecteur h2 la propriete di spl ay avec la valeur 1 1st- 
item (repere Q ' Tous les contenus des elements <h2> s'affichant des lors sous forme de 
liste, nous pouvons ensuite leurs appliquer les proprietes speciflques list-style-image 
(repere ©), list-style-type (repere ©) et list-style-position (repere ©). Les definitions 
de styles suivantes (reperes 0, ©, Q et ©) creent une presentation proche de celle obtenue 
dans le menu horizontal de l'exemple 15-8. Linclusion de tous les elements <h2> (reperes ©, 
©, ©, © et ©) dans une division <di v> (repere ©) permet de positionner l'ensemble sur la 
partie gauche de la page a l'aide des proprietes posi ti on et wi dth (repere ©). 

Exemple 15-9. Affichage d'elements divers sous forme de liste 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml :lang="fr"> 
<head> 

<title>Construction d'un menu vertical</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=i so-8859-1" /> 
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<style type="text/css" title="Menu"> 

h2{displ ay : 1 i st-i tem©;l 1 s t- style- image: url (f 1 eche. gif ) ©; 
*»1 i st-style-type: disc©; list-style-position: inside©; font-si ze:18px; 
*»background-color:#EEE;padding:5px 20px 5px 20px;border-bottom:2px solid #AAA;} 

hl{text-al ign:center;border-top:2px solid #AAA;border-bottom: 2px solid #AAA; 

^»font-size:44px; font-style: obi ique; } 

a{color:navy;} 

div{ posit ion: absolute; width: 15^;} 
</style> 
</head> 
<body> 

<hl>Les technologies du Web</hl> 
<div> 

<h2Xa href="http://www. w3.org" tabindex="l" accesskey="A" title="Specifications 
*»XHTML 1.0" >XHTML 1.0</aX/h2> 

<h2Xa href="http://www.funhtml .com" tabindex="2" accesskey="B" 
*»title="Specifications XHTML 1.1">XHTML l.K/aX/h2> 
<h2Xa href="http://www. w3.org/TR/CSS21/" tabindex="3" accesskey="D" 
>"»title="Specifi cations CSS 2.1">CSS 2.1</aX/h2> 
<h2Xa href="http://www. php.net" tabindex="4" accesskey="G" 
*-title="Specifications CSS 2.1">PHP</aX/h2> 
<h2Xa href="http://www.mysql .org" tabindex="5" accesskey="H" 
*»title="Specifications CSS 2. l">MySQL</aX/h2> 
</div> 
</body> 
</html> 

La figure 15-12 montre le resultat obtenu. 
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Figure 15-12 

Creation d'une liste a partir d 'elements <h2> 
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Dans la meme optique, il est possible de realiser une liste imbriquee sur plusieurs niveaux 
a partir des elements <hl>, <h2> et <h3> en definissant pour chacun d'eux (reperes ©- Q 
et ©), dans l'exemple 15-10, la propriete di spl ay avec la valeur 1 1 st-i tern comme prece- 
demment. Nous definissons ensuite les proprietes list-style-image, list-style-type et 
1 1 st-styl e-posi ti on (reperes ©, ©, 0, et 0) pour creer et positionner des puces dif- 
ferentes pour chaque niveau. En creant des marges gauches (reperes © et ©), on peut 
afficher chaque niveau en retrait du niveau precedent. 

Exemple 15-10. Creation d'une liste imbriquee a partir d'elements de titre 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Listes imbriquees a partir d'elements de titre</title> 
<meta http-equi v="Content-type" content="text/html ; charset=i so-8859-1" /> 
<link rel ^"shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" > 

hi {di spl ay : 1 i st- item O;! i st-styl e-image: url ( . . / i mages /fl eche.gi f ) 0; 

^»list-style-position: inside©; font-size :24px;} 

h2( display:list-item ©;list-style-type:square ©; list-style-position: inside©; 
^•margin-left: 20px ©; font-size:18px;} 

h3{ display:list-item ©;list-style-type:disc ©; list-style-position: inside©; 
^•margin-left: 40px ©; font-size:16px;} 
</style> 
</head> 
<body> 
<hl> Partie I </hl> 
<h2> Chapitre 1 </h2> 
<h3>Section A</h3> 
<h3>Section B</h3> 
<h3>Section C</h3> 
<h2> Chapitre 2 </h2> 
<h3>Section A</h3> 
<h3>Section B</h3> 
<h2> Chapitre 3 </h2> 
<h3>Section A</h3> 
<h3>Section B</h3> 
<hl> Partie II </hl> 
<h2> Chapitre 4</h2> 
<h3>Section A</h3> 
<h3>Section B</h3> 
<h2> Chapitre 5 </h2> 
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<h3>Section A</h3> 

<h3>Section B</h3> 
</body> 
</htm1> 
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Notons pour finir que 1' utilisation d'autres elements XHTML aurait le meme effet a 
condition de leur attribuer la propriete di spl ay avec la valeur 1 ist-item. 



Exercices 



Exercice 1 : Creez deux listes et definissez explicitement les styles par defaut des 
elements <ol > et <ul >. 

Exercice 2 : Creez une liste numerotee en caracteres latins majuscules. 

Exercice 3 : Creez une liste sur deux niveaux, numerotee en caracteres latins pour le 
premier et en alphabet grec pour le second. Attribuez une fonte et une taille differentes a 
chaque niveau. 

Exercice 4 : Creez une liste non ordonnee dotee de puces carrees. 

Exercice 5 : Creez une liste numerotee en chiffres remains pour le premier niveau et a 
puces graphiques pour le second. 
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Exercice 6 : Creez une liste de definition de termes et appliquez-lui les proprietes de 
numerotation des elements <ol >. 

Exercice 7 : Pour cet exercice, telechargez et installez tout d'abord le navigateur Opera. 
Utilisez ensuite des compteurs pour numeroter une liste de format papier, leurs dimensions 
allant de AO a A5 (pour me moire le format A4 correspond a 297 x 210 mm). 

Exercice 8 : Transformez le menu horizontal de l'exemple 15-8 en menu vertical en 
conservant les elements <ol>. 
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Les medias ecrits 



Les navigateurs sont les moyens les plus courants pour visualiser les pages web, mais 
s'ils representent l'immense majorite des moyens mis en ceuvre, ce ne sont pas les seuls. 
II est en effet possible d'afficher une page sur des medias tres divers, aussi bien des termi- 
naux portables ayant des ecrans de petite taille que des medias dits « pagines ». Un navi- 
gateur est en effet un media continu, car la page est unique et sa hauteur peut etre tres 
grande (en realite, il n'y a pas de limite a cette hauteur), et parce qu'il suffit a l'utilisateur 
de la faire defiler, d'ou l'introduction systematique des roulettes sur les souris ces dernie- 
res annees. Dans les medias pagines, le contenu de la page n'est plus visualise de facon 
continue mais sous forme de feuilles qui se succedent. II s'agit par exemple des impri- 
mantes ou des retroprojecteurs qui presentent un site sous forme de diapositives comme 
le fait PowerPoint. Nous nous interessons particulierement ici a la maniere de creer des 
styles en vue d'imprimer le contenu d'un site. Compte tenu du peu de prise en charge par 
les differents navigateurs de certaines possibilites que nous allons aborder, il conviendra 
de se montrer circonspect dans leur utilisation. Le projet de recommandation CSS 3 
devrait cependant reprendre et etendre les possibilites d'impression et il nous semble 
utile de s'y preparer. 
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Adapter les styles a I'impression 

Cibler un media precis 

Plusieurs moyens sont disponibles pour qu'un ensemble de styles s' applique a un media 
donne et non a d'autres. Si ces styles sont inclus dans un fichier externe ayant 1' extension 
.ess, nous pouvons les importer en precisant dans l'element <1 ink /> le media cible en 
utilisant l'attribut media de la maniere suivante : 

< 1 ink rel ="styl esheet" type="text/css" media="screen" href="styl e_ecran . ess" /> 
< 1 ink rel ="styl esheet" typ e="text/css" media="print" href="style_imprime.css" /> 

Lors de I'impression, seuls les styles contenus dans le fichier imprime.css sont appliques. 

II est egalement possible de definir des styles specifiques a un media en les ecrivant dans 
plusieurs elements <styl e> munis egalement d'un attribut medi a adapte a la circonstance, 
par exemple : 

<style type="text/css" medi a="screen">© 
body {background-color: yellow; color:blue;}@ 
</style> 

<style type="text/css" media="print">© 
body {background-color: white; color: black;}© 
</style> 

Dans ce cas, le premier element <style> (repere O) est adapte aux ecrans et le texte de la 
page est ecrit en bleu sur fond jaune (repere ©). En revanche, le second element (repere ©) 
est adapte aux imprimantes et va afficher un texte noir sur fond blanc (repere 0). L'ordre 
d' apparition de ces deux elements n'a ici aucune importance. 

La distinction entre les differents medias peut aussi etre operee a l'interieur me me d'un 
unique element <style>, en divisant son contenu en plusieurs sections, chacune d'elles 
etant introduite par la directive ©media suivie du nom du media, puis de 1' ensemble des 
styles inclus entre accolades. 

Le code suivant en donne un exemple : 

] <style type="text/css" > 
©media screen (O 
body{background-color: blue; font-family: Arial; color: white;} 

} 

©media print{© 
body {background-col or: #FFF; font-family: Times; color: #000;} 

} 

</style> 

Dans ce cas, les styles crees dans la premiere directive ©media (repere Q) permettent 
d' afficher sur 1' ecran un texte blanc sur fond bleu avec une police Arial. Les styles definis 
dans la seconde directive (repere ©) permettent quant a eux d' afficher un texte noir sur 
fond blanc dans une police Times. 
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Adaptation des styles 

II ne s'agit pas ici d'envisager la simple impression d'une page web en tant que copie 
d'ecran, ce que chaque visiteur peut faire a partir de son navigateur, mais bien plutot de 
definir les styles qui permettent une impression correcte des pages ayant un contenu tex- 
tuel important, et de limiter 1' impression a ce contenu reellement informatif, en omettant 
volontairement les parties non signifiantes comme les menus ou les bandeaux graphiques 
ou publicitaires presents en haut des pages. Le but est done de permettre aux visiteurs de 
recuperer la trace ecrite d'un contenu. 

La plupart des proprietes que nous avons etudiees sont applicables a l'impression d'un 
document, mais la gestion des couleurs n'etant pas assuree cote client, il est preferable de 
creer des styles appropries a une sortie sur une imprimante noir et blanc, et par exemple 
de definir des nuances avec des niveaux de gris plutot qu'avec des couleurs comme pour 
une sortie sur ecran. De meme, les polices de la famille sans-serif comme Arial, definies 
avec la propriete font-f ami ly, sont reputees etre plus lisibles sur un ecran que les polices 
de type serif comme Times, qui sont reputees plus lisibles sur un support papier. Nous 
pourrons done definir differemment la propriete font-family selon qu'elle s'applique a 
l'ecran ou a l'impression. 

L' exemple 16-1 donne une illustration de ces adaptations en ne redefinissant des styles 
qu'en fonction du media cible et en ne permettant de realiser que l'impression du contenu, 
en eliminant done les elements d' organisation de la page telle qu'elle est vue habituel- 
lement. 

La page web concernee, representee a la figure 16-1, comporte trois zones quand elle est 
affichee a l'ecran. 

Chacune de ces zones est comprise dans un element <div> (reperes 0, Q et ©) posi- 
tionne a l'aide des styles que nous avons etudies au chapitre 13 et qui sont definis 
dans le bloc @medi a screen (repere ©)• En revanche, l'utilisateur qui veut imprimer le 
contenu du site n'a pas besoin de retrouver sur chaque page le bandeau situe en haut 
de l'ecran, ni le menu situe sur la gauche. Nous devons done les eliminer dans le bloc 
©media print (repere 0) dedie aux styles d'impression. Pour cela, nous utilisons la 
propriete displ ay en lui affectant la valeur none (reperes et 0) pour les deux pre- 
miers elements <di v> (reperes et 0). Nous adaptons egalement la police de carac- 
teres en definissant la propriete font-family avec la valeur Times serif (repere 0) et 
la propriete font-size en utilisant l'unite pt adaptee aux imprimantes pour les ele- 
ments <p> et <h2> (reperes et ©). De plus, l'impression en noir sur fond blanc ou 
gris est definie explicitement par les valeurs des proprietes color et background-color 
(reperes et 0). 

Exemple 16-1. Adaptation des styles a l'impression 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
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<html xmlns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 
<head> 

<title>La reference des elements XHTML l.K/title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css" > 
©media screen{© 
body {background-color: #FFA; font-family: Arial;} 

div#tete {position: fixed ; left: Opx; top: Opx; width: 100%; height: 15%; 
^background-color: rgb( 0,0,153) ; z-index: 5; margin:0; } 

div#menu {position: fixed ; width: 20%; left: Opx; top: 15%; background-color: 
-f rgb(255 . 102, 51 ) ; color: white;} 

div#contenu {position: absolute ; idth: 80%; left: 20%; top: 17%; 

background-color: #FFA; color: black;} 
p {margin-left: 20px;} 

div hi {font-size: 50px; font-style: italic; color: rgb( 255 , 102 , 51 ) ; margin-top: 
*»0px; margin-left: 200px;} 

} 

©media print{© 
div#tete {display: none;}© 
div#menu {display: none;}© 

div#contenu {width: 170mm; background-color: white; color: black; margin-left: 
»*20mm; text-align: justify; font-family: Times serif;}© 
p {margin-left: 15mm; font-size: 14pt;}© 

h2{font-size:30pt; text-align:center; margin-bottom: 30mm; background-color: 
*-#EEE;}© 

} 

</style> 
</head> 
<body> 

<div id="tete">© 
<hl>funhtml .com  Reference XHTML l.K/hl> 

</div> 

<div id="menu">© 

<ul> 

<li> !D0CTYPE</li> 
<li><html></li> 
<1 i >&1 1 ; head&gt ; </l i > 
<li><body></li> 
<li><a></li> 
<li><abbr></li> 
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<li><acronym></li> 
<!-- Suite des elements XHTML--> 
</ul> 
</div> 

<di v id="contenu">© 
<h2>Le langage XHTML</h2> 

<p>In principio creavit Deus caelum et terrain terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
•♦Deus fiat lux et facta est lux et vidit Deus lucem . . .</p> 
</div> 
</body> 
</html> 
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Figure 16-1 

La page d'origine dans un navigateur 



La figure 16-2 montre l'apergu avant impression obtenu dans Mozilla ou Fire Fox. Les 
resultats obtenus dans les navigateurs Opera ou Internet Explorer sont equivalents, mais 
chaque navigateur cree des marges differentes dans les parametres d'impression, et nous 
ne pouvons pas intervenir sur ces valeurs. Un texte donne n'occupe done pas le meme 
espace quand il est imprime, a partir de differents navigateurs, a moins de prevenir le 
visiteur de mettre manuellement toutes les marges a la valeur 0. 
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Figure 16-2 

Adaptation des styles a V impression 



Creer un en-tete commun aux pages 

L'exemple precedent elimine deliberement l'en-tete et le menu de la page, mais vous 
pouvez trouver utile de faire apparaitre un en-tete commun a toutes les pages imprimees, 
qu'il soit publicitaire ou non, quand le contenu est long. Pour parvenir a ce resultat, nous 
devons modifier dans le bloc ©media print (repere O) l es styles existants en creant tout 
d'abord un espace en haut de chaque page, en definissant une marge haute pour l'element 
<body> dans laquelle s'inscrira le bandeau (repere ©). Ensuite, nous positionnons le 
deuxieme element <div> de maniere fixe a l'aide des proprietes position, left et top 
(repere ©). Les styles suivants restent inchanges (reperes ©. 0, © et ©). 

Exemple 16-2. Creation d'un bandeau sur chaque page 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 

<head> 

<title>La reference des elements XHTML l.K/title> 

<meta http-equiv="Content-Type" content="text/html ; charset=i so-8859-1" /> 
<style type="text/css" > 
©media screen{ 
body {background-color: #FFA; font-family: Arial;} 
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div#tete (position: fixed ; left: Opx; top: Opx; width: 100%; height: 15%; 

background-color: rgb(0, 0,153) ; z-index: 5; margin:0; } 
div#menu (position: fixed ; width: 20%; left: Opx; top: 15%; background-color: 

rgb(255.102,51); color: white;} 
div#contenu (position: bsolute ; width: 80%; left: 20%; top: 17%; 
^» background-color: #FFA; color: black;} 
p (margin-left: 20px;} 

div hi (font-size: 50px; font-style: italic; color: rgb(255,102,51) ; margin-top: 
*»0px; margin-left: 200px;} 

} 

©media print(© 
body(margin-top: 20mm; }© 

div#tete (position: fixed; left: Opx; top: Opx; width: 100%; height: 20mm; 
^background-color: #CCC; font-family: An" al ; font-size: 16pt;}© 
div#menu (display: none;}© 

div#contenu (background-color: white; color: black; margin-left: 20mm; 

text-align: justify;}© 
p (margin-left: 15mm;}@ 

h2(font-size: 30pt; font-family: Times; text-align: center; margin-bottom: 30mm; 
^background-color: #EEE;}© 

} 

</style> 
</head> 
<body> 

<div id="tete"> 
<hl>funhtml .com  Reference XHTML l.K/hl> 
</div> 

<div id="menu"> 
<ul> 

<li>D0CTYPE</li> 
<li><html></li> 
<li><head></li> 
<1 i >&1 1 ; body&gt ; </l i > 
<li><a></li> 
<!-- Suite des elements --> 
</ul> 
</div> 

<div id="contenu">© 
<h2>Le langage XHTML</h2> 

<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 

et tenebrae super faciem abyssi et . . .</p>© 
<h2>Les styles CSS 2.1 </h2> 

<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et . . .</p>© 
</div> 
</body> 
</html> 

La page con tenant plusieurs paragraphes inclus dans le troisieme element <di v> (reperes ©, 
© et ©), nous pouvons verifier dans les apercus avant impression des pages 1 et 2 presentees 
aux figures 16-3 et 16-4 que chacune possede bien le meme en-tete. 
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La page 1 avec son en-tete 



hcmriffL, nd Hiuvpnfin iumil *A xnx$rmK Nfi cr^mit itui: m.^ruhun ft t«rutLini fre-mit e^n 



Les sh ies CSS 2.1 



In pronto CT*^it ca*-kmi ft iffrjeii tffT.i aizfin frit uuni( « vacua « imfbra^ oap^ 

faiiciD Db;- »si d ipi*ii> Dei fncbnftn iuj>n aquni Autque Dc-js &nl tui <rl focta eat hu et %idd 
Dfut quad *MeI bctfia et dr.iw t>~em ac te™*rai ^ppfDm-nqiif hicetn Ami ft tfuft^n', 

/r::. factuntauf Ml vtsp«« et mane diet ma -±xa fliwquc Drus sot aimianitnTUBi a mcdie 
a/^miijui el *idal aijjai ab a<juii rL 3"e^H Drui AsiijaieDaiui *iiilifir a/^uai ifjae nam Mlt 



funhtml.com Reference XHTML 1.1 

hifffcaeii virftiTfni « t'nciertfm !«nen ei l^nur. |>f'nutrtiuii ta.-ifn* fn^nuri n:\:.i rf^nn iinu^i 
ozui jemm m lemet qjio si^m tmma ct factum ■est Etn ct pcotufa Lena bcibniD innileia ct 
■irffffffirffli iftnen nixtn geenit "nnim ligjuniqiif f.vurfil fmcFiun f[ i , ..v'--..- liraanqiiodiju^ 
■ fir.fiHMi secundum sp<»i«ti ium» cc "idii D i::; i tiiet benutu factunva^e en et 
maie iei leitui Jl\iI aulm: Deu^ IijcI hncEiaiia si li 1:1 jic-iik> <:aeti JriJaiil Jieni ac ostein 
et (me n (L^fia et tmipora fr i±f« ft anixv^ in ni.-fnm m hrrnmtifntc- .-afl n uJiaiunfis tfTTAni et 
factum HI an tcciLquc Dcui duo magna hntnioria tmanaie iMDUi ul pacoict (tn cl kmmvaEe 
nnmii praeetWI n£>rt fl UflLv. et poiuit eai m GmiAnifrilfl c.ifB li Jj.-frerf -mper teerau et 
Y.:..:: - in ac ncca « dpvleretn r::, ac KQttaaj ei ■ ■.■2,: Dnu -a>^d -:■ ■ t-ioum ti 




Figure 16-4 

La page 2 avec son en-tete 
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Gestion des sauts de page 

Nous pouvons ameliorer la presentation d'un contenu imprime en inserant, comme dans 
un traitement de texte, des sauts de page uniquement avant et apres un element de bloc, 
en definissant respectivement les proprietes page-break-before et page-break-after, dont 
la syntaxe commune est la suivante : 

page-break-before: auto | always | avoid | left | right | inherit 
page-break-after: auto | always | avoid | left | right | inherit 

Voici la signification de leurs parametres : 

• auto : les sauts de page ne sont effectues que si necessaire ; 

• always : le saut de page force est toujours autorise avant ou apres un element quelle 
que soit sa hauteur ; 

• avoid : aucun saut de page force n'est autorise ; 

• left : le saut de page n'est autorise que si l'element figure dans une page de gauche 
(page paire ou verso) ; 

• right : le saut de page n'est autorise que si l'element figure dans une page de droite 
(page impaire ou recto). 
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Figure 16-5 

La page affichee dans un navigateur 



L'exemple 16-3 permet de tester ces proprietes en definissant une mise en page parti- 
culiere pour un document dans sa version imprimee. La figure 16-5 montre 1' aspect de la 
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page dans un navigateur afin de bien mettre en evidence, par contraste, les differences 
avec la version imprimee (voir figure 16-6). 

Pour la version imprimee, notre objectif est de faire apparaitre le titre <hl> (repere ©) 
seul au milieu de la premiere page, le titre <h2> (repere ©) et le contenu du paragraphe 
<p> de la premiere section (repere Q) sur une page impaire (la page 3), et chacune des 
sections suivantes (les titres et les paragraphes) (reperes © et ©, puis © et ©) sur une 
nouvelle page. Pour y parvenir, nous creons des styles propres a 1' impression dans un ele- 
ment <styl e> specialise (repere O)- Pour centrer verticalement le titre <hl>, nous lui attri- 
buons une marge haute de 130 mm, et la propriete page-break-after permet d'inserer un 
saut de page immediatement apres lui (repere ©). La propriete page-break-before est 
appliquee uniquement au premier titre <h2> a l'aide d'un selecteur d'id (repere ©) pour 
creer le saut de page avant lui, afin qu'il apparaisse avec le premier paragraphe sur la 
page 3. Pour tous les autres paragraphes, y compris le premier, nous creons un saut de 
page avec la propriete page-break-after (repere 0) pour que ce qui suit soit imprime sur 
une nouvelle page. Afin de ne pas obtenir une page blanche en fin d' impression, nous 
annulons ce saut de page pour le dernier paragraphe (repere ©) en definissant la pro- 
priete page-break-after avec la valeur avoid (repere ©). Notons que les resultats obtenus 
presentes en figure 16-6 sont valables aussi bien dans Mozilla, Opera que Internet Explorer, 
ce qui est assez rare pour etre signale. 

Exemple 16-3. Insertion de sauts de pages 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml 11/DTD/xhtml 11 .dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Media imprimes</titl e> 

<meta http-equiv="Content-type" content="text/html ; charset=i so-8859-1" /> 
< 1 ink rel ="shortcut icon" type="images/x-i con" href=". ./images/favicon.ico" /> 
<style type="text/css" title="impression" media="screen"> 
*{font-family: Arial sans-serif;) 

hi {font-size: 2em; margin-bottom: 40px; border: lOpx double;} 
h2 {font-size: 1.4em;} 

p {font-size: 1.2em; margin: 30px 30px;} 
</style> 

<style type="text/css" title="impression" media="print">© 
*{font-family: Times serif;} 

hi {font-size: 36pt; margin-top: 130mm; text-align: center; page-break-after: 

always; }© 
h2 {font-size: 20pt;} 

h2#premier {page-break-before: always;}© 

p {font-size: 12pt; font-style: italic; text-align: justify; page-break-after: 

always; }© 
p#dernier {page-break-after: avoid;}© 
</style> 
</head> 



Les medias ecrits 

Chapitre 16 

<body> 

©<hl>XHTML et CSS</hl> 

©<h2 id="premier">XHTML l.K/h2> 

©<p>In principio creavit Deus caelum et terrain terra autem erat inanis 

et vacua et tenebrae super faciem abyssi et spiritus . . .</p> 
©<h2>CSS 2.1</h2> 

©<p> In principio creavit Deus caelum et terrain terra autem erat inanis 

et vacua et tenebrae super faciem abyssi et spiritus . . . </p> 
©<h2>PHP 5</h2> 

©<p id="dernier">In principio creavit Deus caelum et terram terra autem erat 
^» inanis et vacua et tenebrae super faciem abyssi et spiritus . . .</p> 
</body> 
</html> 
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Figure 16-6 

Realisation des sauts de pages d V impression 



Les sauts de page effectues a l'interieur d'un element de bloc sont automatiques quand le 
contenu est long, la suite du texte etant de fait imprimee sur la page suivante. Pour eviter 
d'obtenir des coupures qui risquerait de ne faire apparaitre que quelques lignes orpheli- 
nes en haut de la derniere page, CSS2 offre la possibilite de placer des sauts de page a 
l'interieur d'un bloc. Cette possibilite reste assez theorique, car pour l'instant elle n'est 
exploitee, et encore incompletement, que par Opera 8. Nous la signalons cependant a 
titre informatif, en esperant que tous les navigateurs la prendront en compte de maniere 
precise dans un avenir proche. 

Pour gerer ces sauts de page, nous disposons de plusieurs proprietes qui doivent etre uti- 
lisees conjointement. Pour autoriser ce type de saut de page, il faut definir la propriete 
page-break-inside dont la syntaxe est la suivante : 

page-break-inside : auto | avoid | inherit 

avec la valeur auto, la valeur avoid interdisant ces sauts. 

En complement, la propriete widows, dont la valeur est un nombre entier (par defaut, elle 
est de 2), permet d'indiquer le nombre minimal de lignes d'un bloc qui peuvent etre placees 
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en haut d'une page. Si la coupure automatique d'un texte contenu dans un element <p> ou 
<div>, par exemple, conduit a faire apparaitre moins de lignes que la valeur fixee dans 
widows, alors le paragraphe entier est place dans la page suivante, creant ainsi un saut de 
page force a la suite de 1' element. 

De meme, la propriete orphans permet de definir le nombre minimal de lignes d'un bloc 
qui doivent apparaitre en bas d'une page. Si la coupure automatique du texte conduit a 
afficher un nombre inferieur de lignes, alors tout le paragraphe est imprime sur la page 
suivante. 

Ces definitions sont celles qui figurent dans la recommandation CSS 2.1 du W3C, mais 
elles restent pour l'instant lettre morte, et les tests effectues ne fournissent le resultat 
espere dans aucun navigateur. 

Si nous definissons par exemple les styles suivants : 

p {orphans: 15; widows: 10; page-break-inside: auto;} 

et que nous visualisons le resultat de l'apercu avant impression dans Opera 8, nous obtenons 
le resultat presente a la figure 16-7. 

Nous remarquons que Opera gere ces proprietes exactement a 1' inverse des definitions du 
W3C. En effet, la propriete wi dows a la valeur 10 et 10 lignes apparaissent en bas de la pre- 
miere page. De meme, la propriete orphans a la valeur 15 et il apparait 16 lignes sur la 
deuxieme page. 



Figure 16-7 

Les sauts de pages 
internes 
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Les pseudo-classes d'impression 

En vue d'ameliorer encore la presentation des documents imprimes, les concepteurs de 
CSS ont defini les pseudo-classes :f1rst, :left et : right, afin d'ajouter des fonctionnali- 
tes dignes d'un traitement de texte evolue. Helas, encore une fois, elles ne sont prises en 
compte que par Opera 8. Nous ne les citons ici que pour memoire, leur utilisation n'etant 
pas recommandee pour l'instant, tant que les autres navigateurs ne les auront pas imple- 
mentees. 

Elles s'utilisent conjointement a la directive @page de la maniere suivante : 

• @page:first{Definitions des styles;} pour que les styles ne s'appliquent qu'a la pre- 
miere page imprimee. 

• @page:left{Definitions des styles;} pour que les styles s'appliquent aux pages de 
gauche (les pages paires). 

• ©page: right{Definitions des styl es ;} pour que les styles s'appliquent aux pages de 
droite (les pages impaires). 

L'exemple 16-4 utilise ces pseudo-classes pour creer une mise en page particuliere 
qui s' applique a la premiere page en y creant une marge haute de 100 mm (repere ©)> 
puis des marges gauche et droite differentes selon qu'il s'agit d'une page gauche ou 
droite, en supposant que les feuilles pourraient etre reliees ou agrafees. Pour les pages 
de gauche (les pages paires), la marge droite est de 40 mm et la marge gauche de 10 mm 
(repere ©). Pour les pages de droite (les pages impaires), ces valeurs sont inversees 
(repere ©). 

Exemple 16-4. Les pseudo-classes d'impression 

<?xml version="1.0" encoding="iso-8859-l"?> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
<html xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>Media imprimes</title> 

<meta http-equi v="Content-type" content="text/html ; charset^i so-8859-1" /> 

<link rel ^"shortcut icon" type="images/x-icon" href=". ./images/favicon.ico" /> 

<style type="text/css" medi a="screen"> 
hi (font-family: Times ; font-size: 2em; margin-bottom: 40px; border: lOpx double;} 
p {font-family: Times; font-size: 1.2em; margin: 30px 30px;} 

</style> 

<style type="text/css" titl e="impression" media="print"> 
@page:first {margin-top: 100mm; lO 
@page:left {margin-right: 40mm; margin-left: 10mm;}© 
@page:right {margin-left: 40mm; margin-right: 10mm;}© 
hi {font-family: Arial; font-size: 20pt; margin: Ocm 3cm 2cm 0cm; 
background-color: #EEE;} 
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p (font-family: Arial; font-size: 12pt; font-style: italic; text-align: justify; 
width: 150mm;} 
</style> 
</head> 
<body> 
<hl>XHTML et CSS</hl> 

<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux . . . </p> 
<p>In principio creavit Deus caelum et terram terra autem erat inanis et vacua 
et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas dixitque 
Deus fiat lux et facta est lux . . . </p> 
</body> 
</html> 

La figure 16-8 montre le resultat obtenu, qui correspond bien a l'objectif vise, mais seulement 
dans Opera 8. 
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Exercices 

Exercice 1 : Quelles sont les differentes methodes permettant de creer des styles particuliers 
pour un media donne ? 

Exercice 2 : Creez des styles differents pour l'ecran et l'impression en utilisant la direc- 
tive ©media, pour que le texte soit affiche en jaune sur fond bleu a l'ecran, et en noir sur 
fond blanc a l'impression. 

Exercice 3 : Adaptez les polices de caracteres et leur taille avec des valeurs differentes 
pour l'ecran et l'impression. 

Exercice 4 : Creez un en-tete de page contenant votre nom et votre mail pour qu'il appa- 
raisse en haut de chaque page imprimee mais pas dans un navigateur. 

Exercice 5 : Creez un document dont le contenu est inclus dans plusieurs elements <div> 
et definissez les styles permettant d'obtenir des sauts de page a l'impression apres chacun 
de ces elements. 

Exercice 6 : Dimensionnez et positionnez une page et les paragraphes qu'elle contient 
pour qu'ils soient imprimes en format paysage. 
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Annexe A 

Reference 
des elements XHTML 



Notations 

Les attributs en gras souligne sont obligatoires 

Le symbole | signifie "ou" 

Le symbole 1 1 signifie "et/ou" 

(el ement)* signifie ou plusieurs fois l'element 

(el ement)? signifie ou une fois l'element 

(el ement)+ signifie 1 ou plusieurs fois l'element 
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Element <a>...< la> 



Definition 


Lien hypertexte. 


Enfants 


Texte, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, hi , 
h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, span, strong, 
sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


accesskey 


Definit la touche de raccourci clavier a I'aide d'une lettre. 


charset 


Indique un jeu de caracteres (exemple : iso-8859-1). 


coords 


Cree une zone sensible dans le lien (rectangle, cercle, polygone) en inqiquant des coor- 
donnees. 


href 


Oontient I UKL du document cible. 


hreflang 


Le code de langue du document cible. 


onblur 


Evenement qui se produit quand I'element perd le focus. 


onfocus 


Evenement qui se produit quand I'element regoit le focus. 


rel 


Type de la relation entre le document et la cible. 


rev 


Type de la relation entre la cible et le document. 


shape 


Type de forme de la zone sensible (voir coords). 


tabindex 


Entier donnant un ordre de tabulation pour I'element. 


target 


Indique le nom du cadre dans lequel doit s'afficher la cible du lien (avec la DTD frameset 
seulement). 


type 


Type MIME du fichier cible ("text/html" ou "image/gif" par exemple). 


Element <abbr>. . 


. .< /abbr> 


Definition 


Abreviation. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <acronym>...< /acronym> 



Definition 


Acronyme. 


Enfants 


Texte a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, 
kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <address>...< /address> 


Definition 


Enfants 


Texte a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, evenements de base. 


Element <area /> 


Definition 


Definit une zone sensible au die. 


Enfants 


Aucun. 


Parents 


map. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


accesskey 


Definit la touche de raccourci clavier a I'aide d'une lettre. 


ill 


Texte descriptif de la cible du lien. 


coords 


Liste d'entiers separes par des virgules definissant la zone. 


href 


Contient I'URL du document cible. 


nohref 


"nohref". 


onblur 


Evenement qui se produit quand I'element perd le focus. 


onfocus 


Evenement qui se produit quand I'element regoit le focus. 


shape 


Definit la forme de la zone (default|rect|circle|poly). 


tabindex 


Entier donnant un ordre de tabulation pour I'element. 
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Element <t»...< /b> 



Definition 


Mise en gras du contenu (preferez un style CSS). 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <base /> 


Definition 


Definition de I'adresse de base pour les URL relatives. 


Enfants 


Aucun. 


Parents 


head. 


Attributs 


Definition et valeurs 


Communs 


id. 


href 


Contient I'URL de base. 


Element <bdo>...- 


< /bdo> 


Definition 


Indique le sens de lecture du texte. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, 
map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


dlr 


Sens de lecture Itr (gauche a droite par defaut) ou rtl (doite a gauche). 
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Element <big>...< /big> 



Definition 


Texte dans une police plus grande (preferez un style CSS). 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, q, samp, small, span, 
strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <blockquote>...< /blockquote> 



Definition 


Bloc de citation. 


Enfants 


address, blockquote, del, div, dl, fieldset, form, hi , h2, h3, h4, h5, h6, hr, ins, noscript, ol, p, 
pre, script, table, ul. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


cite 


URL d'une ressource precisant le contenu. 



Element <body>. 


..< /body> 


Definition 


Corps du document. 


Enfants 


address, blockquote, del, div, dl, fieldset, form, hi , h2, h3, h4, h5, h6, hr, ins, noscript, ol, p, 
pre, script, table, ul. 


Parents 


html. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


onload 


Evenement survenant au chargement de la page. 


onunload 


Evenement survenant a la fermeture de la page. 
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Element <br /> 



Definition 


Saut de ligne. 


Enfants 


Vide. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 



Communs id, class, title. 



Element <button>. 


,..< /button> 


Definition 


Cree un bouton personnalisable. 


Enfants 


Texte, abbr, acronym, address, b, bdo, big, blockquote, br, cite, code, del, dfn, div, dl, em, hi , 
h2, h3, h4, h5, h6, hr, i, img, ins, kbd, map, noscript, object, ol, p, pre, q, samp, script, small, 
span, strong, sub, sup, table, tt, ul, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, 
hi , h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, span, strong, 
sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


accesskey 


Definit la touche de raccourci clavier a I'aide d'une lettre. 


disabled 


"disabled". 


name 


Nom du bouton. 


onblur 


Evenement qui se produit quand I'element perd le focus. 


onfocus 


Evenement qui se produit quand I'element regoit le focus. 


tabindex 


Entier donnant un ordre de tabulation pour I'element. 


type 


(button submit reset). 


value 


Valeur associee au bouton qui sera transmise au serveur en cas de programmation dyna- 
mique (PHP par exemple). 
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Element <caption>...< /caption> 



Definition 


Titre d'un tableau. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, 
map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


table. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <cite>. 


..< /cite> 


Definition 


Citation mi irtp 

V-/ 1 Id LIU 1 1 uvUI L^. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, 

man nhippt n camn Qprint qpIppt Qmall cnan Qtrnnn qi in qi in tpytarpp tt \/ar 

llld|J, UUJCUL, L|, odlll|J T oul IfJl, otJICUL, ollldll, bpall, dIIUIILJ. oUU, oup, LoALalca, 11, Veil. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element < code 


>...< /code> 


r\dfini4inn 

ucTimuon 


Code source. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, 
map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 



Communs 



id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <col /> 



Definition 


Definition d'une colonne de tableau. 


Enfants 


vide. 


Parents 


colgroup, table. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


align=(left| center| 
right| justify) 


Alignement horizontal du contenu de la colonne. 


span 


Nombre de colonnes identiques dans un groupe. 


valignftop | middle | 
bottom | baseline ) 


Alignement vertical du contenu de la colonne. 



width Largeur de la colonne. 



Element <colgroup>...< /colgroup> 



Definition 


Groupe de colonnes. 


Enfants 


(col)*. 


Parents 


table. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


align=(left| center| 
right| justifyl char) 


Alignement horizontal du contenu des colonnes. 


span 


Nombre de colonnes du groupe. 


valign (top | middle | 
bottom | baseline) 


Alignement vertical du contenu de la colonne. 


width 


Largeur des colonnes. 
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Element <dd>...< /dd> 



Definition 


Definition d'un terme dans une liste. 


Enfants 


Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, dl, 
em, fieldset, form, hi , h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, object, 
ol, p, pre, q, samp, script, select, small, span, strong, sub, sup, table, textarea, tt, ul, var. 


Parents 


dl. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <del>. 


,.</del> 


Definition 


Signale un contenu modifie. 


Enfants 


Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, 
dl, em, fieldset, form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, 
object, ol, p, pre, q, samp, script, select, small, span, strong, sub, sup, table, textarea, tt, ul, 
var. 


Parents 


a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, cite, code, dd, del, 
dfn, div, dt, em, fieldset, form, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, noscript, 
object, p, pre, q, samp, small, span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


cite 


URL du fichier donnant des precisions sur la modification. 


datetime 


Date de modification. 



Element <dfn>...< /dfn> 



Definition 


Contient une definition. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <div>...< /div> 



Definition 


Cree une division structurelle dans la paqe. 


Enfants 


Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, 
dl, em, fieldset, form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, 
object, ol, p, pre, q, samp, script, select, small, span, strong, sub, sup, table, textarea, tt, ul, 
var. 


Parents 


blockquote, body, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <dl>.. 


.</dl> 


naif ittitifirt 
Ucl 11 1IUUII 


1 iota Ho HaTimt'ir\n Ho torrriQC 
Llblc Uc UclllllllUll Uc ItMlllfcJb. 


Enfants 


(dt | dd)+. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <dt>.. 


,.</dt> 


Definition 


Terme a definir dans une liste. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


dl. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <em>...< /em> 



Definition 


Texte mis en evidence (preferez un style CSS). 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmhlang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <fieldset>...< /fieldset> 


Definition 


Groupe de champs d'un formulaire. 


Enfants 


Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, dl, 
em, fieldset, form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, legend, map, noscript, 
object, ol, p, pre, q, samp, script, select, small, span, strong, sub, sup, table, textarea, tt, ul, var. 


Parents 


blockquote, body, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmhlang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <form>.. 


.< /form> 




Definition 


Parent de tous les elements de formulaire. 




Enfants 


address, blockquote, del, div, dl, fieldset, hi, h2, h3, h4, h5, h6, hr, ins, noscript, ol, p, pre, 
script, table, ul. 


Parents 


blockquote, body, dd, del, div, fieldset, ins, li, map, noscript, object, td, th. 




Attributs 


Definition et valeurs 




Communs 


id, class, title, xmhlang, dir, onclick, ondblclick, onkeydown, onkeypress, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


onkeyup, 


accept 


Types MIME des fichiers acceptes en telechargement vers un serveur. 




accept-charset 


Indique un jeu de caracteres (exemple : iso-8859-1). 




action 


Norn du fichier de traitement des donnees du formulaire cote serveur. 




enctype 


Type d'encodage des informations a transmettre sur le serveur Valeur par defaut 
tion/x-www-form-urlencoded". 


: "applica- 


method 


Methode de transfert des donnees : get (par defaut) ou post. 




on reset 


Evenement survenant lors de I'affacemment des donnees saisies. 




onsubmit 


Evenement survenant lors de I'envoi du formulaire. 
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Element <frameset>...< /frameset) (DTD xhtml 1.0 frameset) 



Hof initinn 

Uciiniuun 


Cree un ensemble de cadres. 


CIlldlHb 


/fr^mocot I frame I nnfmrtiflcl* 

Ulalllcocl | llalllc | 1 lull alllcb/ . 


rarenis 


html 

num. 


Attributs 


Definition et valeurs 


Communs 


id, class, title. 


cols 


Definit le partage de la fenetre en plusieurs colonnes. 


onload 


Evenement survenant lors du chargement de la page. 


onunload 


Evenement survenant lors de la fermeture de la page. 


rows 


Definit le partage de la fenetre en plusieurs lignes. 


Element <frame />(DTD xhtml 1 .0 frameset) 


Definition 


Cree un cadre. 


Enfants 


Vide. 


Parents 


frameset. 


Attributs 


Definition et valeurs 


Communs 


id, class, title. 


frameborder=(1 | 0) 


Cree des bordures autour d'un cadre(valeur 1 ) ou sinon. 


longdesc 


URL vers un document donnant une description du contenu du cadre. 


marginheight 


Marge haute entre le contenu et les bords superieur et inferieur du cadre. 


marginwidth 


Marge haute entre le contenu et les bords gauche et droit du cadre. 


name 


Norn du cadre. Utilise pour creer une communication entre deux cadres. 


noresize=(noresize) 


Interdit le redimensionnement du cadre par I'utilisateur. 


scrolling=(yes | no | 
auto ) 


Autorise ou pas le defilement du contenu d'un cadre. 


src 


URL du fichier a visualiser dans un cadre. 


Element <h1>...< 


/h1> a <h6>...< /h6> 


Definition 


Titres de niveau 1 a 6. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <head>...< /head> 



Definition 


En-tete du document. 


Enfants 


(title & base?) + ( script | style | meta | link ). 


Parents 


html. 


Attributs 


Definition et valeurs 



Communs xmklang, dir. 



Element <hr /> 


Definition 


Ligne de separation. 


Enfants 


Vide. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 




Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <html>...< /html> 



Definition 


Element racine du document. 


Enfants 


head, body. 


Parents 


Aucun, c'est I'element racine. 


Attributs 




Communs 


xmklang, dir. 


Element <i>.. 


,.</[> 


Definition 


Texte en italique (preferez un style CSS). 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <img /> 



Definition 


Image. 


Enfants 


Vide. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 

fiplH<?pt hi h? h4 h 1 -! hfi i in*? khrl lahpl IpnpnH li nhipri n n ciamn Qmall qnan 

iciuoc [ , ill, I ill , iiu, i^ , I i*j, iiu, I, iiio, ixuvj, duel, icy ci iu , n, cujcci . p . i^, dcii I ip. oiiiuii, opuii, 

strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


alL 


Texte descriptif en cas de non affichage de I'image ou pour les navigateurs oraux. 


height 


Hauteur de I'image. 


ismap (ismap) 


Definit s'il existe une carte de zones sensibles. 


longdesc 


URL du fichier de description de 1'image. 


src 


URL du fichier image. 


usemap 


URL de la description de la carte des zones sensibles si elle est situee cote serveur. 


width 


Largeur de I'image. 



Element <input /> 



Definition 


Cree un champ de formulaire. 


Enfants 


Vide. 


Parents 


a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, 
hi , h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, span, strong, 
sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Parents 


id, class, title, xmLlang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


accept 


Type MIME des fichiers acceptes. 


accesskey 


Definit la touche de raccourci clavier a I'aide d'une lettre. 


alt 


Texte explicatif si le type est image. 


checked (=checked) 


Coche d'office une case a cocher. 


disabled (=disabled) 


Rend un champ inactif. 


ismap(=ismap) 


Definit s'il existe une carte de zones sensibles. 


maxlength 


Nombre maximal de caracteres autorises dans un champ texte. 
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Element <input /> (suite) 



name 


Norn du champ. 


onblur 


Evenement qui se produit quand I'element perd le focus. 


onchange 


Evenement qui se produit quand le contenu d'un element change. 


onfocus 


Evenement qui se produit quand I'element recoit le focus. 


onselect 


Evenement qui se produit quand un texte est selectionne dans I'element. 


readonly (readonly) 


Rend le champ non modifiable. 


size 


Taille d'un champ de saisie en nombre de caracteres. 


src 


URL du fichier image si type vaut "image". 


tahindpx 

ICikJ 1 IUCA 


Fntipr Honnant un nrdrp Hp tahnlatinn nnur I'plpmpnt 

1 — 1 1 lid UU 1 1 1 ICU 1 1 U 1 1 kllUK. \J\j IUUUIQLIUI 1 uUUI CICI 1 ICI II 


t\/np— 1 tpxt 1 na*^- 

word checkbox | 
radio submit | reset 
file | hidden | image | 
button ) 


Dptprminp |p tvnp du rhamn dp formulairp Rpsnprtivpmpnt 7onp dp tpxtp mot dp nassp 

\-/ tici [Mil 1 1< i i y ui/ uu wiiaiiik/ u 1 1 1 u i ci 1 1 g . i iGOkJGGiivdiidii i.ui ic \jVj in; a ic . 1 1 1 u i uc uqjoc. 

case a cocher, bouton radio, bouton d'envoi, bouton de reinitialisation, zone de transfert de 
fichier, champ cache, image et bouton personalise. 


usemap 


Si le type est "image", designe I'URL de la description de la carte des zones sensibles si elle 

col oIlUcc UULc ocIVcUI. 


value 


Valeur associee au champ. 


Element <ins>... 


< /ins> 


Definition 


rinntipnt un tpyfp marmip rnmmp nmi\/paii 

WUI IIICM I Ull ICAIC 1 1 1 0.1 l_j UC Kj\J \ 1 II 1 IC 1 IvUV COU, 


Enfants 


Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, 
dl, em, fieldset, form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, 
object, ol, p, pre, q, samp, script, select, small, span, strong, sub, sup, table, textarea, tt, ul, 
var 


ParpntQ 

rai ci no 


a ahhr arrnnum aHHrp<?<? arpa h hrln hin hlnrkni intp hnnV hi ittnn ritp rnrlp HH HpI 

dfn, div, dt, em, fieldset, form, h.1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, noscript, 

rtnioot n ma n o ^mn c m 3 II cnan ctrfin/i ci in ci in tH tn tt i/or 
UUJUCL, p, pic, q, bdllip, bllldll, bpdll, buuiiy, bUU, bup, IU, 111, LL, Vdl. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


cite 


URL donnant la description de la modification. 


datetime 


Date de la modification. 
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Element <kbd>... 


< /kbd> 


Definition 


Signale un contenu a saisir au clavier (exemple un raccourci). 


Enfants 


Tpvtp q ahhr arronvm h brio hin hr button dtp rodp dpi dfn pm i imn innut ins khd 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 




q dhhr a/rr^nwm QrlHrocc h hHn hin hi ittnn ncarvtinn pi to nnHo HH Hoi Hfn Hi\/ Ht om 
a, ctUUI, dUIUIIylll, aUUIUbb. U. UUU, UIL), UULLUil, UdUUUII, UUU, LUUc, UU, Ucl, Ulll, UIV, UL, clll, 

fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <label>. 


..< /Iabel> 


Definition 


Definit un libelle, souvent employe dans les formulaires. 


FnfantQ 


Tpytp a ahhr arrnnvm h hHn hin hr huttnn Htp rnrlp Hpl rlfn pm i imn innnt in 1 ? khH 
icaic Q, quui , qui ui ly i 1 1 , u, uuu, uiy , ui, uuuui i, ui lu, wuc, uci. uiii. ciii, i, iiiy, iiiuui, iiio, i\uu, 

label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


ral CI 1 lo 


a ahhr aprnnvm aHHroQQ h hHn hin pantinn nitp rnHp HH HpI Hfn Hi\/ Ht pm f iolHcipt 

a, ctUUI, dUIUIIylll, allUlcoo, U, UUU, UILJ, Ud|JUUI!, Ullt, lUUc, UU, UUI, Ulll, UIV, UL, Clll, IIUIUoUl, 

hi , h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, span, strong, 
sub, sup, td, th, tt, var. 


Definition 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


accesskey 


Definit la touche de raccourci clavier a I'aide d'une lettre. 


for 


Contient I'identifiant d'un autre element auquel il est associe. 


onblur 


Evenement qui se produit quand I'element perd le focus. 


onfocus 


Evenement qui se produit quand I'element regoit le focus. 



Element <legend>...< /legencb 



Definition 


Contient le titre d'un groupe de champs (de formulaire en general). 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


fieldset. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


accesskey 


Definit la touche de raccourci clavier a I'aide d'une lettre. 
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Element <li>...< /li> 



Definition 


Item d'une liste. 


Enfants 


Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, 
dl, em, fieldset, form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, 
object, ol, p, pre, q, samp, script, select, small, span, strong, sub, sup, table, textarea, tt, ul, 
var. 


Parents 


ol | ul. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmhlang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <l ink /> 



Definition 


Lie un document annexe au document principal (une feuille de style par exemple). 


Enfants 


Vide. 


Parents 


head. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmhlang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


charset 


Indique un jeu de caracteres (exemple : iso-8859-1). 


href 


Contient I'URL du document cible. 


hreflang 


Le code de langue du document cible. 


media 


Type du media concerne. 


rel 


Type de la relation entre le document principal et le document cible. 


rev 


Type de la relation entre le document cible et le document principal. 


type 


Type MIME du fichier cible ("text/ess" par exemple). 
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Element <map>...< /map> 



Definition 


Cree une carte de zones sensibles pour une image. 


Enfants 


address, area, blockquote, del, div, dl, fieldset, form, hi , h2, h3, h4, h5, h6, hr, ins, noscript, 
ol, p, pre, script, table, ul. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


name 


Norn servant a identifier la carte. 


Element <meta /> 


Definition 


Contient des meta informations sur le document. 


Enfants 


Vide. 


Parents 


head. 


Attributs 


Definition et valeurs 


Communs 


xmklang, dir. 


content 


Contenu de I'information. 


http-equiv 


Equivalent du nom dans les en-tetes http. 


name 


Norn de I'information. 


Element <noframes>...< /noframes> (DTD xhtml 1.0 frameset) 


Definition 


Cree un contenu alternatif pour les navigateurs n'acceptant pas les cadres. 


Enfants 


body. 


Parents 


frameset. 


Attributs 




Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <noscript>...< /noscript> 



Definition 


Cjpp 1 1 n rontpnu altprnatif nnur ]ps nauinatpnr^ n'arrpntant na^ Ip^i sprints 


Enfants 


address, blockquote, del, div, dl, fieldset, form, hi , h2, h3, h4, h5, h6, hr, ins, noscript, ol, p, 
pre, script, table, ul. 


Parents 


area, blockquote, body, button, dd, del, div, fieldset, form, ins, li, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <object>. 


...< /object> 


Definition 


Objet multimedia. 


Enfants 


Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, 
dl, em, fieldset, form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, 
object, ol, p, param, pre, q, samp, script, select, small, span, strong, sub, sup, table, textarea, 
tt, ul, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, head, i, ins, kbd, label, legend, li, object, p, q, samp, small, 

^nan <?trnnn <5iih qi in tH th tt \/ar 

open i, ouuiiy, ouu, oup, lu, lii, u, vai. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


archive 


URL des fichiers contenant des ressources utiles a I'affichage de I'objet specif te par classid 
ou data. 


classid 


URL d'un fichier utile a laffiochage de I'objet (plug-in). 


codebase 


URL de base pour resoudre les adresses relatives des fichiers necessaires a I'affichage de 
I'objet. 


codetype 


Type MIME. 


data 


URL du fichier de donnees de I'objet. Pour une image c'est I'adresse du fichier image. 


declare(declare) 


S'il est utilise, cet attribut precise que I'element ne fait que declarer un objet sans I'instancier. 
II faut alors inclure un autre element object dans le premier. 


height 


Hauteur de I'objet. 


name 


Norn de I'objet. 


standby 


Texte a afficher pendant le temps de chargement du fichier. 


tabindex 


Entier donnant un ordre de tabulation pour I'element. 


type 


Type MIME du fichier cible ("audio/mpeg" ou "image/gif" par exemple). 


usemap 


URL de la carte des zones sensibles applicable a I'objet. 


width 


Largeurde I'objet. 
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Element <ol>...< /ol> 



Definition 


Liste ordonnee. 




Enfants li. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 




Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


onkeyup, 


Element <optgroup>...< /optgroup> 


Definition 


Groupe d'options dans une liste de selection de formulaire. 




Enfants 


option. 




Parents 


select. 





Definition 


Definition et valeurs 




Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


onkeyup, 


disabled= (disabled) 


Desactive le groupe d'options (reste visible). 




laoei 


Libelle du groupe d'options. 




Element <option>. 


...< /option> 




Definition 


Cree une option dans une liste de selection. 




Enfants 


Texte brut. 




Parents 


select. 




Attributs 


Definition et valeurs 




Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


onkeyup, 


disabled (disabled) 


Desactive I'option (qui reste visible). 




label 


Libelle de I'option (les navigateurs devraient utiliser cette valeur a la place du contenu de 
I'element, mais ce n'est pas encore le cas). 


selected (selected) 


Rend I'option selectionnee par defaut. 




value 


Valeur associee a I'option. 
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Element <p>...< /p> 



Definition 


Cree un paragraphe. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <param /: 


> 


Definition 


Parametre passe a un objet. 


Enfants 


Vide. 


Parents 


object. 


Attributs 


Definition et valeurs 


Communs 


id. 


name 


Norn du parametre. 


type 


Type MIME du fichier cible quand I'attribut valuetype vaut "ref". 


value 


Valeur du parametre. 


valuetype=(data | ref 
| object) 


Type de I'attribut value (donnee, URL ou objet). 


Element <pre>...< 


: /pre> 


Definition 


Cree un texte formate dont la mise en page est conservee (espaces et sauts de ligne). 


Enfants 


Texte, a, abbr, acronym, b, bdo, br, button, cite, code, dfn, em, i, input, kbd, label, map, q, 
samp, script, select, span, strong, textarea, tt, var. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <q>...< /q> 



Definition 


Citation courte. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



cite URL du document donnant des precisions sur le texte cite. 



Element <samp>. 


..< /samp> 


Definition 


Structure un texte d'exemple 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


Element <script>. 


..< /script> 


Definition 


Conteneur d'un script, generalement JavaScript. 


Enfants 


Texte du script et commentaires XHTML. 


Parents 


a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, cite, code, dd, del, 
dfn, div, dt, em, fieldset, form, hi, h2, h3, h4, h5, h6, head, i, ins, kbd, label, legend, li, nos- 
cript, object, p, pre, q, samp, small, span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id. 


charset 


Indique un jeu de caracteres (exemple : iso-8859-1). 


defer (defer) 


Signale au navigateur de ne pas interpreter le script avant d'avoir fini de charger la page. 


src 


URL du fichier externe contenant le code du script. 


type 


Precise le langage utilise ("text/javascript" par exemple). 


xml:space 


(preserve). 
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Element <select>...< /select> 



Definition 


Liste de selection d'options. 
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hi , h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, span, strong, 
sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmhlang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


disabled (disabled) 


Rend la liste inactive. 


multiple(multiple) 


Permet des choix multiples dans la liste d'option. 


name 


Norn de la liste. 


onblur 


Evenement qui se produit quand I'element perd le focus. 


onchange 


Evenement qui se produit quand le choix effectue a change. 


onfocus 


Evenement qui se produit quand I'element regoit le focus. 


size 


Nombre d'options visibles a I'affichage de la liste. 


tabindex 


Entier donnant un ordre de tabulation pour I'element. 


Element <small>. 


..< /small> 


Definition 


Zone de texte de petite taille. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, 
kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, 
var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, q, samp, small, span, 
strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 



Communs 



id, class, title, xmhlang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 
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Element <span>...< /span> 



Definition 


Conteneur en liqne. Utilise pour appliquer des styles localement. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <strong>...< /strong> 



Definition 


Texte en gras. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <style>.. 


..< /style> 




Definition 


Conteneur des styles CSS dans la page. 




Enfants 


Texte des styles CSS, commentaires XHTML. 




Parents 


head. 




Attributs 


Definition et valeurs 




Communs 


xmhlang, dir, title. 




media 


Type du media concerne par les styles. 




type 


Precise le type des styles definis ("text/ess" en general). 
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Elements <sut»...< /sut» et <sup>...< /sup> 



Definition 


Mise en indice (sub) ou en exposant (sup) d'un texte. 


Enfants 


Texte, a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, 
kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, 
var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <table>...< /table> 



Definition 


Conteneur des elements de tableau. 


Enfants 


caption?, (col*|colgroup*), thead?, tfoot?, tbody+. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


border 


Epaisseur de la bordure du tableau. 


cellpadding 


Espacement entre le contenu et la bordure des cellules. 


cellspacing 


Espacement entre les cellules d'un tableau. 


frame=(void | above | 
below hsides Ihs 
rhs vsides | box | 
border) 


Type d'affichage des bordures externes d'un tableau. 


rules=(none | groups 
| rows | cols | all) 


Type d'affichage des bordures internes d'un tableau. 


summary 


Texte resumant le contenu du tableau. 


width 


Largeurdu tableau. 
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Elements <thead>...< /thead>, <tbody>...< /tbody> et <tfoot>...< /tfoot> 



Definition 


Creent respectivement le conteneur, de I'en-tete, du corps et du pied d'un tableau. 


cnidnis 


ir. 


Parents 


table. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


align=(left|cen- 
ter[right|justify|char) 


Definit I'alignement horizontal du texte. 


valign = (top middle 
Ibottom baseline) 


Definit I'alignement vertical du texte. 



Elements <td>.. 


.</td> et <th>...</th> 


Definition 


Creent des cellules de tableau (respectivement ordinaires et d'en-tete). 


Enfants 


Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, 
dl, em, fieldset, form, hi, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, noscript, 
object, ol, p, pre, q, samp, script, select, small, span, strong, sub, sup, table, textarea, tt, ul, 
var. 


Parents 


tr. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


align=(left | center | 
right justify | char) 


Fixe I'alignement horizontal du contenu d'une cellule. 


colspan 


Permet de fusionner deux cellules de colonnes voisines. 


rowspan 


Permet de fusionner deux cellules de lignes voisines. 



valign = (top | middle Fixe I'alignement vertical du contenu d'une cellule, 
bottom | baseline) 



Element <textarea>...< /textarea> 


Definition 


Cree une zone de saisie de texte multiligne dans un formulaire. 


Enfants 


Texte. 


Parents 


a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, 




hi , h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, span, strong, 




sub, sup, td, th, tt, var. 
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Element <textarea>...< /textarea> (suite) 



Attribute 


Definition et valeurs 
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id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 




accesskey 


Definit la touche de raccourci clavier a I'aide d'une lettre. 






cols 


Nombre de colonnes de la zone de texte. 






disabled (disabled) 


Rend la zone inactive (saisie impossible). 






name 


Norn de la zone de saisie. 






onblur 


Evenement qui se produit quand I'element perd le focus. 






onchange 


Evenement qui se produit quand le contenu de I'element a change. 






onfocus 


Evenement qui se produit quand I'element regoit le focus. 






onselect 


Evenement qui se produit lors d'une selection dans I'element. 






readonly =(readonly) 


Place la zone en lecture seule. 






rows 


Nombre de lignes de texte dans la zone. 






tabindex 


Entier donnant un ordre de tabulation pour I'element. 






Element <title>. . 


.< /title> 






Definition 


Titre de la page (obligatoire). 






Enfants 


Texte. 






Parents 


head. 






Attributs 


Definition et valeurs 






Communs 


xmklang, dir. 






Element <tr>...< 


/tr> 






Definition 


Ligne de cellules d'un tableau. 






Enfants 


(th | td)+. 






Parents 


table, tbody, tfoot, thead. 






Attributs 


Definition et valeurs 






Communs 


id, class, title, xmhlang, dir, onclick, ondblclick, onkeydown, onkeypress, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 


onkeyup, 


align=(left | center | 
right | justify | char) 


Fixe I'alignement horizontal des cellules d'une ligne. 






valign=(top | middle | 
bottom | baseline) 


Fixe I'alignement vertical des cellules d'une ligne. 
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Element <tt>...< /tt> 



Definition 


Texte en police teletype (a espacement fixe). Preferez un style CSS. 


Enfants 


Texte a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <ul>.. 


.</ul> 


Definition 


Liste non ordonnee. 


Enfants 


(Ii)+. 


Parents 


blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xml:lang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Element <var>...< /var> 



Definition 


Conteneur pour structurer des variables. 


Enfants 


Texte a, abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, 
label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. 


Parents 


a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, 
fieldset, hi, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, samp, small, 
span, strong, sub, sup, td, th, tt, var. 


Attributs 


Definition et valeurs 


Communs 


id, class, title, xmklang, dir, onclick, ondblclick, onkeydown, onkeypress, onkeyup, 
onmousedown, onmousemove, onmouseover, onmouseout, onmouseup. 



Annexe B 

Reference CSS 2 



Feu i Me de style par defaut recommandee par le W3C 

html , address , 

blockquote, 

body, dd, div, 

dl , dt, fieldset, form, 



frame, frameset, 

hi, h2, h3, h4, 

h5, h6, noframes, 

ol , p, ul , hr, pre { display: block } 

li { display: list-item } 

head { display: none } 

table { display: table } 

tr { display: table-row } 

thead { display: table-header-group ) 

tbody { display: table-row-group } 

tfoot { display: table-footer-group } 

col { display: table-column } 

colgroup { display: table-column-group ) 

td, th { display: table-cell } 

caption { display: table-caption } 

th { font-weight: bolder; text-align: center } 

caption { text-align: center } 

body { margin: 8px } 

hi { font-size: 2em; margin: .67em ) 

h2 { font-size: 1.5em; margin: .75em } 
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h3 

h4, p, 

blockquote, ul , 

fieldset, form, 

ol, dl, 

h5 

h6 

hi, h2, h3, h4, 
h5, h6, b, 
strong 
bl ockquote 
i , cite, em, 
var, address 
pre, tt, code, 
kbd, samp 
pre 

button, textarea, 
input, select 
big 

small , sub, sup 

sub 

sup 

table 

thead, tbody, 

tfoot 

td, th 

del 

hr 

ol , ul , dd 
ol 

ol ul , ul ol , 
ul ul , ol ol 
ins 

br:before 
:before, :after 
:link, :visited 
:focus 



font-size: 1.17em; margin: .83em 



font-size: .83em; margin: 1.5em } 
font-size: .75em; margin: 1.67em 



{ font-weight: bolder } 
margin-left: 40px; margin-right: 40px 

( font-style: italic } 

( font-family: monospace } 

{ white-space: pre } 

{ display: inline-block } 

( font-size: 1.17em } 

{ font-size: .83em } 

{ vertical-align: sub } 

{ vertical-align: super } 

{ border-spacing: 2px; } 

{ vertical-align: middle } 

( vertical -al ign: inherit } 

{ text-decoration: line-through } 

{ border: lpx inset } 

{ margin-left: 40px } 

{ list-style-type: decimal } 

{ margin-top: 0; margin-bottom: } 

( text-decoration: underline ) 

{ content: "\A" } 

( white-space: pre-line } 

{ text-decoration: underline } 

{ outline: thin dotted invert } 



@media print { 
hi 

hi, h2, h3, 
h4, h5. h6 
ul , ol , dl 

} 



page-break-before: always 

page-break-after: avoid } 
page-break-before: avoid } 
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Reference des proprietes 

Quand elle existe, la valeur par defaut de chaque propriete est indiquee en gras souligne . 
Unites de longueur 

Tous les parametres designes par l'expression <1 ongueur> ou W% peuvent s'exprimer a 
l'aide d'un nombre et de l'une des unites suivantes : 

• relatives : em, ex, px ; 

• absolues : mm, cm, in (inch), pt (point), pc (pica) ; 

• en pourcentage : en reference a une dimension de 1' element parent. 

Couleurs 

Tous les parametres designes par l'expression <coul eur> representent une couleur et peu- 
vent etre donnes par : 

• des mots-cles, par exemple bl ack (voir la liste des mots-cles figurant en annexe C) ; 

• des codes hexadecimaux precedes du caractere diese (#), par exemple #FC34A9 ; 

• une fonction rgb(R, G, B) dans laquelle les parametres R, G et B representent les com- 
posantes Red, Green et Blue (rouge, vert, bleu) de la couleur, exprimees par des nombres 
variant de a 255 ou de a 100 % au choix. 



Propriete background-attachment 



Definition 


Fixe I'image de fond ou permet son defilement. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


background-attachment : scroll | fixed. 


Valeurs 


scroll 


L'image defile avec le contenu. 


fixed 


L'image reste fixe dans le fenetre du navigateur. 


Propriete background-color 


Definition 


Couleur de fond. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


background-color : <couleur> | transparent | inherit. 


Valeurs 


<couleur> 


Code de couleur, mot-cle ou fonction rgb(). 


transparent 


Transparence qui laisse voir la couleur de I'element parent. 
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Propriete background-image 



Definition 


Image de fond d'un element. 




Appliquee a 


Tous les elements. 




Heritee 


Non. 




Syntaxe 


background-image : url (adresse image) | none | inherit. 




Valeurs 


url(adresse image) 


Adresse de I'image de fond. 





none Pas d'image. 



Propriete background-position 



Definition 


Donne la position de I'image de fond par rapport aux bords gauche et haut de I'element. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


background-position : [[N% | <longueur>] | [left | center | right] [NN% | <longueur>| top | 
center | bottom] ?] | [left | center | right] [top | center | bottom]] | inherit. 


Valeurs 


<longueur> 


Nombre et unite de longueur. 


N% 


Pourcentage de la taille de I'element lui-meme. La valeur par defaut est 0%. 


top 


Image placee en haut. 


center 


Image centree verticalement. 


bottom 


Image placee en bas. 


left 


Image placee a gauche. 


center 


Image centree horizontalement. 



right Image placee a droite. 



Propriete background-repeat 



Definition 


Repete ou non I'image de fond dans I'element. 




Appliquee a 


Tous les elements. 




Heritee 


Non. 




Syntaxe 


background-repeat : repeat | repeat-x | repeat-y | no-repeat. 




Valeurs 


repeat 


Repetition sur les axes x et y. 




repeat-x 


Repetition sur I'axe des x. 




repeat-y 


Repetition sur I'axe des y. 





no-repeat Pas de repetition. 



Propriete background 



Definition 


Raccourci pour definir en une fois les couleur et images de fond. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


background : [ background-color || background-image || background-repeat || background-atta- 
chement || background-position] | inherit. 


Valeurs 


background-color 


Voir les valeurs de la propriete background-color. 


background-image 


Voir les valeurs de la propriete background-image. 


background-repeat 


Voir les valeurs de la propriete background-repeat. 


background-attachment Voir les valeurs de la propriete background-attachment. 


background-position Voir les valeurs de la propriete background-position. 


Propriete border-collapse 


Definition 


Fusionne ou non les bordures adjacentes des cellules d'un tableau. 


Appliquee a 


Elements de tableau. 


Heritee 


Oui. 


Syntaxe 


border-collapse : collapse | separate | inherit. 


Valeurs 


collapse 


Les bordures des cellules adjacentes sont fusionnees. 


separate 


Les bordures ne sont pas fusionnees (chaque cellule peut avoir une bordure differente. 


Propriete border-color 


Definition 


Raccourci pour definir la couleur des quatre bordures d'un element. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


border-color : [<couleur> | transparent] {1 ,4} | inherit. 


Valeurs 


<couleur> 


De un a quatre codes de couleur, mot-cle ou fonction rgb(). 


transparent 


Transparence qui laisse voir la couleur de fond. 
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Proprietes border-top-color, border-right-color, border-bottom-color, 
border-left-color 



Definition 


Definit individuellement la couleur d'une bordure haute, droite, basse ou gauche. 




Appliquee a 


Tous les elements. 




Heritee 


Non. 




Syntaxe 


border-top-color : <couleur> | transparent inherit. 




Valeurs 



Parametres Voir la propriete border-color. 



Propriete border- 


■spacing 


Definition 


Espacement horizontal et vertical entre les bordures des cellules de tableau. II taut que la 
propriete border-collapse ait la valeur separate. 


Appliquee a 


Elements de tableau. 


Heritee 


Oui. 


Syntaxe 


border-spacing : <longueur> <longueur> ? inherit. 


Valeurs 



<longueur> De une a deux longueurs, la seconde etant facultative. La valeur par defaut est 0. 



Propriete border- 


-style 


Definition 


Raccourci definissant le style de une a quatre bordures d'un element. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


border-style : [dashed | dotted | double | groove | inset | outset | ridge | solid | none] {1 ,4}. 


Valeurs 


dashed 


Pointilles ronds. 


dotted 


Pointilles avec tirets. 


double 


Trait continu double (si I'epaisseur le permet, sinon le trait est simple). 


groove 


Bordure en relief, double biseau creux. 


inset 


Relief simple en creux. 


outset 


Relief simple en saillie. 


ridge 


Bordure en relief, double biseau saillant. 


solid 


Trait simple continu. 


none 


Pas de bordure. 
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Proprietes border-top-style, border-right-style, border-bottom-style, 
border-left-style 



Definition 


Definit individuellement le style d'une bordure haute, droite, basse ou gauche. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


border-top-style : dashed | dotted | double groove | inset outset | ridge solid none. 


Valeurs 



Parametres Voir la propriete border-style. 



Propriete border-width 



Definition 


Largeur des bordures d'un element. On peut donner de une a quatre valeurs pour les bords 
haut, droit, bas et gauche dans cet ordre. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


border-width : [thick medium thin <longueur>]{1 ,4}. 


Valeurs 


thick 


Bordure epaisse. 


medium 


Bordure moyenne. 


thin 


Bordure mince. 


<longueur> 


Une unite de longueur. 



Proprietes border-top-width, border-right-width, border-bottom-width, 
border-left-width 



Definition 


Definit individuellement la largeur d'une bordure haute, droite, basse ou gauche. 




Appliquee a 


Tous les elements. 




Heritee 


Non. 




Syntaxe 


border-top-width : thick | medium |thin | <longueur>. 






Valeurs 




Parametres 


Voir la propriete border-width. 
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Propriete border 



Definition 


Raccourci pour definir en une fois la largeur, le style et la couleur des quatre bordures. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


border : [border-width || border-style ||<couleur> | transparent] | inherit. 


Valeurs 


border-width 


Voir la propriete border-width. 


border-style 


Voir la propriete border-style. 


<couleur> 


Voir la propriete border-color. 



Proprietes border-top, border-right, border-bottom, border-left 



Definition 


Raccourcis permettant de definir les caracteristiques (largeur, style et couleur) des bordures 
haute, droite, basse ou gauche en une seule fois. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


[border-width || border-style | <couleur>] | inherit. 


Valeurs 


border-width 


Largeur de la bordure (voir la propriete border-width). 


border-style 


Style de la bordure (voir la propriete border-style). 


<couleur> 


Couleur de la bordure (voir la propriete border-color). 



Propriete bottom 



Definition 


Position par rapport au bord bas du conteneur. 




Appliquee a 


Les elements positionnes. 




Heritee 


Non. 




Syntaxe 


bottom : <longueur> | N% | auto | inherit. 




Valeurs 


<longueur> 


Nombre et unite de longueur. 




N% 


Pourcentage de la hauteur de I'element parent. 




auto 


Le navigateur determine au mieux. 
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Propriete caption-side 



Definition 


Position du titre d'un tableau. 


Appliquee a 


L'element <caption> et ceux pour lesquels la propriete display vaut table-caption. 


Heritee 


Oui. 


Syntaxe 


caption-side : top | bottom | inherit. 


Valeurs 


top 


Titre au-dessus du tableau. 


bottom 


Titre en-dessous du tableau. 


Propriete clear 


Definition 


Empeche le flottement des autres elements sur le cote de celui pour lequel cette propriete 
est definie. 


Appliquee a 


Les elements de bloc. 


Heritee 


Non. 


Syntaxe 


clear : none | left | right | both | inherit. 


Valeurs 


none 


Le flottement est autorise. 


left 


Le flottement est interdit sur la gauche. 


right 


Le flottement est interdit sur la droite. 


both 


Le flottement est interdit sur les deux cotes. 



Propriete clip 


Definition 


Definit les dimensions du rectangle de visualisation en cas de debordement. 


Appliquee a 


Les elements positionnes de maniere absolue. 


Heritee 


Non. 


Syntaxe 


clip : <rectangle> | auto | inherit. 


Valeurs 


<rectangle> 


Le rectangle est defini par la fonction rect(Xh, Xb,Yb, Yh). Les parametres definissent le rec- 
tangle par rapport aux bords de la zone totale de l'element. 


auto 


Gere par le navigateur. 
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Propriete color 



Definition 


Couleur du texte et de I'avant-plan. 




Appliquee a 


Tous les elements. 




Heritee 


Oui. 




Syntaxe 


color : <couleur> | inherit. 




Valeurs 



<couleur> Code de couleur, mot-cle ou fonction rgb(). 



Propriete content 



Definition 


Cree un contenu genere avant ou apres un element. 


Appliquee a 


Les pseudo-elements : before et after. 


Heritee 


Non. 


Syntaxe 


content : normal | none | [chaine | <url> | <counter> | attr(attribut) | open-quote | close-quote 
| no-open-quote | no-close-quote ]+ | inherit. 


Valeurs 


none ou normal 


Aucun contenu n'est genere. 


<chaine> 


Le contenu de la chaine est ajoute. 


<url> 


Le contenu du fichier cible designe par son adresse est ajoute. 


attr(attribut) 


Le contenu de I'attribut designe est ajoute. 


open-quote 


Ajout des caracteres choisis comme symbole d'ouverture de citation (par exemple ", ", 
ou «). 


close-quote 


Ajout des caracteres choisis comme symbole de fermeture de citation (par exemple ", ", 
ou »). 



Propriete counter-increment 



Definition 


Incrementation d'un compteur identifies. 




Appliquee a 


Tous les elements. 




Heritee 


Non. 




Syntaxe 


counter-increment : [ <identifiant> N? ]+ | none | inherit. 




Valeurs 


none 


Aucune incrementation. 




<identifiant>N 


Increments le compteur identifie par son nom de la valeur N a chaque item. 
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Propriete counter-reset 



Definition 


Initialise un compteur. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


counter-reset : [ <identifiant> ]+ | none | inherit. 


Valeurs 


<identifiant> 


Initialise le compteur dont le nom est precise par son identifiant. 



Propriete direction 



Definition 


Sens de lecture du texte. 


Appliquee a 


Tous les elements. 


Heritee 


Oui. 


Syntaxe 


direction : Itr | rtl | inherit. 


Valeurs 


Itr 


Lecture de gauche a droite. 


rtl 


Lecture de droite a gauche. 



Propriete display 



Definition 


Definit le type d'affichage d'un element (bloc, en ligne, liste, etc.). 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


display : inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | 
table-header-group | table-footer-group | table-row | table-column-group | table-column | 
table-cell | table-caption | none | inherit. 


Valeurs 


none 


Aucun affichage. 


inline 


Type en ligne. 


block 


Type bloc. 


list-item 


Sous forme de liste. 


inline-block 


Bloc en ligne. 


table 


Tableau (comme I'element <table>). 


inline-table 


Tableau en ligne. 


table-row-group 


Groupe de ligne. 


table-header-group 


En tete de tableau (comme I'element <thead>). 


table-footer-group 


Pied de tableau (comme I'element <tfoot>). 



Annexes 

Partie III 

Propriete display (suite) 



Valeurs 


table-row 


Ligne de tableau (comme I'element <tr>). 




table-column-group 


Groupe de colonnes (comme I'element <colgroup>). 




table-column 


Colonne de tableau (comme I'element <col />). 




table-cell 


Cellule de tableau (comme les elements <td> ou <th>). 





table-caption Titre de tableau (comme I'element <caption>). 



Propriete empty-cells 



Definition 


Permet de gerer la visualisation des cellules vides d'un tableau. 




Appliquee a 


Les elements de tableau <td> et <th>. 




Heritee 


Oui. 




Syntaxe 


empty-cells : show | hide | inherit. 




Valeurs 


show 


Les cellules vides sont visibles (bord et couleur de fond). 




hide 


Les cellules vides sont cachees. 




Propriete float 


Definition 


Definit le flottement d'un element. 




Appliquee a 


Tous les elements. 




Heritee 


Non. 




Syntaxe 


float : left | right | none. 




Valeurs 


left 


Lelement flotte a gauche de la page. 




right 


Lelement flotte a droite de la page. 





Propriete font-family 


Definition 


Un ou plusieurs noms de police de caracteres ou de families generiques du texte. 


Appliquee a 


Tous les elements. 


Heritee 


Oui. 


Syntaxe 


font-family : [[ nom_de_police | [serif | sans-serif | cursive | fantasy | monospace ] 




[,nom_de_police | [ serif |sans-serif cursive | fantasy | monospace ]*] | inherit. 
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Propriete font-family (suite) 



Valeurs 


nom_de_police 


Un nom de police courant comme Arial ou Times ; les noms composes doivent etre ecrits 
entre guillemets comme "Times New Roman". 


serif 


Police a empatement du type Times. 


sans-serif 


Police sans empatement du type Arial. 


cursive 


Police cursive du type Script. 


fantasy 


Polices diverses fantaisie. 



monospace Police a espacement fixe. 



Propriete font-size 



Definition 


Taille de la police donnee par un mot-cle ou un nombre et une unite (px, em, ex, mm, cm, 
in, pt, pc). 


Appliquee a 


Tous les elements. 


Heritee 


Oui. 


Syntaxe 


font-size : xx-small | x-small | small | medium | large | x-large xx-large | larger | smaller | 
<longueur> | N% | inherit. 


Valeurs 


de xx-small 
xx-large 


Taille progressive de tres tres petite a tres tres grande, medium etant la taille par defaut. 


small 


Petite taille. 


medium 


Taille moyenne. 


larger 


Taille relative plus grande que le contexte. 


smaller 


Taille relative plus petite que le contexte. 


N% 


Valeur calculee en fonction de la taille de la police de I'element parent. 



Propriete font-style 



Definition 


Style de la police. 




Appliquee a 


Tous les elements. 




Heritee 


Oui. 




Syntaxe 


font-style : normal | italic | oblique | inherit. 






Valeurs 




normal 


Police droite. 




italic et oblique 


Police italique. 
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Propriete font-variant 

Definition Variantes apportees au texte dont les minuscules peuvent etre ecrites en petites majus- 

cules. 



Appliquee a 


Tous les elements. 




Heritee 


Oui. 




Syntaxe 


font-variant : normal | small-caps | inherit. 




Valeurs 


normal 


N'applique aucun effet. 




small-caps 


Transforme les minuscules en petites majuscules. 




Propriete font-weight 


Definition 


Graisse de la police. 




Appliquee a 


Tous les elements. 




Heritee 


Oui. 




Syntaxe 


font-weight : normal | bold | bolder | lighter 1 100 a 900 | inherit. 




Valeurs 


normal 


Texte preserve tel quel. 




bold 


Texte en gras. 




bolder 


Graisse relative plus gras que le contexte. 




lighter 


Graisse relative plus maigre que le contexte. 




100 a 900 


De tres maigre (1 00) a tres gras (900). 




Propriete font 


Definition 


Raccourci pour definir toutes les caracteristiques d'une police en une seule fois. 




Appliquee a 


Tous les elements. 




Heritee 


Oui. 




Syntaxe 


font : [ [ font-style | font-variant || font-weight ]? font-size [ / line-height ]? font-family ] 
tion | icon | menu | message-box | small-caption | status-bar | inherit. 


cap- 


Valeurs 


font-style 


Parametres de la propriete font-style. 




font-variant 


Parametres de la propriete font-variant. 




font-weight 


Parametres de la propriete font-weight. 




font-size 


Parametres de la propriete font-size. 




line-height 


Parametres de la propriete line-height. 




font-family 


Parametres de la propriete font-family. 
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Propriete font (suite) 



Valeurs 


caption 


Police systeme des titres. 


icon 


Police systeme des legendes des icones. 


menu 


Police systeme des menus. 


message-box 


Police systeme des boites de dialogue. 


small-caption 


Police systeme des titres. 


status-bar 


Police systeme des la barre d'etat. 



Propriete height 



Definition 


Hauteur de I'element. 


Appliquee a 


Tous sauf les elements non remplaces en ligne et <col /> et <colgroup>. 


Heritee 


Non. 


Syntaxe 


height : <longueur> | N% | auto | inherit. 


Valeurs 


auto 


Le navigateur determine la hauteur en fonction du contenu. 


N% 


Les pourcentages font reference a la hauteur du bloc parent. 



Propriete left 


Definition 


Position par rapport au bord gauche du conteneur. 


Appliquee a 


Les elements positionnes. 


Heritee 


Non. 


Syntaxe 


left : <longueur> | N% | auto | inherit. 


Valeurs 


auto 


Le navigateur determine la dimension en fonction de la largeur de I'element. 



N% Les pourcentages font reference a la largeur du bloc parent. 



Propriete letter-spacing 



Definition 


Espacement entre les lettres, ajoute ou retranche a la valeur normale. 


Appliquee a 


Tous les elements. 


Heritee 


Oui. 


Syntaxe 


letter-spacing : normal | <longueur> | inherit. 


Valeurs 


normal 


Espacement normal de la police utilisee. 


<longueur> 


Une unite de longueur positive ou negative. 
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Propriete line-height 



Definition 


Hauteur totale de ligne y compris les interlignes. 




Appliquee a 


Tous les elements. 




Heritee 


Oui. 




Syntaxe 


line-height : normal | N <longueur> | N% | inherit. 




Valeurs 


normal 


Hauteur normale pour la police utilisee. 




N 


Un coefficient multiplicateur par rapport a la hauteur de la police. 





N% Calculee par rapport a la valeur de la propriete font-size. 



Propriete list-style-image 



Definition 


Definition de la puce graphique d'une liste. 




Appliquee a 


Les elements <ul> et <ol> et ceux dont la propriete display vaut list-item. 




Heritee 


Oui. 




Syntaxe 


list-style-image : url (image) | none | inherit. 




Valeurs 


none 


Aucune puce. 





url (image) Donne I'adresse relative ou absolue du fichier image. 



Propriete list-style-position 



Definition 


Donne la position du symbole de numerotation d'une liste. 




Appliquee a 


Les elements <ul> et <ol> et ceux dont la propriete display vaut list-item. 




Heritee 


Oui. 




Syntaxe 


list-style-position : inside outside | inherit. 




Valeurs 


inside 


Puce dans le meme alignement vertical que le contenu des items de la liste. 




outside 


Puce en retrait a gauche par rapport aux items. 





Propriete list-style-type 



Definition 


Type de numerotation des listes. 


Appliquee a 


Les elements <ul> et <ol> et ceux dont la propriete display vaut list-item. 


Heritee 


Oui. 


Syntaxe 


list-style-type :circle|decimal|disc|lower-alpha|lower-roman|none|upper-alpha|upper- 
romanjsquare. 


Valeurs 


Les mots cles sont significatifs, respectivement cercle, nombre decimal de 1 a N, disque plein, lettres minuscules, 
chiffres romains minuscules, pas de numerotation, lettres majuscules, chiffres romains majuscules, carre plein. 


Propriete list-style 


Definition 


Raccourci pour definir en une seule fois le type, la position et la puce d'une liste. 


Appliquee a 


Les elements <ul> et <ol> et ceux dont la propriete display vaut list-item. 


Heritee 


Oui. 


Syntaxe 


list-style :[list-style-type || list-style-position || list-style-image] | inherit. 


Valeurs 


list-style-type 


Voir les valeurs de la propriete list-style-type. 


list-style-position 


Voir les valeurs de la propriete list-style-position. 


list-style-image 


Voir les valeurs de la propriete list-style-image. 


Proprietes margin 


-bottom, margin-top, margin-left, margin-right 


Definition 


Definissent respectivement la marge basse, haute, gauche ou droite d'un element. 


Appliquee a 


Tous les elements sauf les elements de tableau. 


Heritee 


Non. 


Syntaxe 


margin-bottom :<longueur> | N% | none | inherit. 


Valeurs 


none 


Pas de marge. 


N% 


Calculee par rapport a la hauteur (pour les marges haute et basse) ou a la largeur (pour les 
marges gauche et droite) de I'element de bloc parent le plus proche. 
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Propriete margin 



Definition 


Raccourci pour definir les dimensions de toutes les marges en une seule propriete. On peut 
preciser de une a quatre valeurs. 


Appliquee a 


Tous les elements sauf les elements de tableau. 


Heritee 


Non. 


Syntaxe 


margin : [<longueur> | N%] {1,4} inherit. 


Valeurs 



N% Calculee par rapport a la largeur de I'element parent. 



Propriete max-height, max-width 



Definition 


Definit respeotivement une hauteur ou une largeur maximale pour la boite d'un element. 


Appliquee a 


Tous sauf les elements en lignes non remplaces et les elements de tableau. 


Heritee 


Non. 


Syntaxe 


max-height : <longueur> | N% | none | inherit. 


Valeurs 


none 


Le navigateur gere la hauteur en fonction du contenu. 


N% 


Calculee en fonction de la dimension de I'element parent. 


Propriete min-height, min-width 


Definition 


Definit respeotivement une hauteur ou une largeur minimale pour la boite d'un element. 


Appliquee a 


Tous sauf les elements en lignes non remplaces et les elements de tableau. 


Heritee 


Non. 


Syntaxe 


min-height : <longueur> | N% | none | inherit. 


Valeurs 


none 


Le navigateur gere la hauteur en fonction du contenu. 


N% 


Calculee en fonction de la dimension de I'element parent. 


Propriete outline-color 


Definition 


Couleur des contours. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


outline-color : <couleur> | invert | inherit. 


Valeurs 


invert 


Inversion video de la couleur de fond de I'element parent. 
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Propriete outline-style 



Definition 


Definit le style des contours. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


outline-style : <border-style> inherit. 


Valeurs 


Prend les memes valeurs que celles de la propriete border-style. 


Propriete outline-width 


Definition 


Definit la largeur des contours. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


outline-width : <border-width> | inherit. 


Valeurs 


Prend les memes valeurs que celles de la propriete border-width. 


Propriete outline 


Definition 


Raccourci pour definir en une seule fois toutes les caracteristiques d'un contour. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


outline : [ <outline-color> | <outline-style> || <outline-width>] | inherit. 


Valeurs 


Prend les memes valeurs que celles des propriet.es outline-color, outline-style et outline-width. 


Propriete overflow 


Definition 


Gere les debordements de largeur et de hauteur d'un element dimensionne. 


Appliquee a 


Les elements de bloc, remplaces les cellules de tableau et les blocs en ligne. 


Heritee 


Non. 


Syntaxe 


overflow : visible | hidden | scoll | auto | inherit. 


Valeurs 


visible 


La boite de I'element est entierement visible. 


hidden 


Le contenu debordant est cache. 


scroll 


Des barres de defilement horizontales et verticales apparaissent pour visualiser le contenu 
debordant. 


auto 


Des barres de defilement apparaissent si necessaire. 
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Propriete padding-left, padding-top, padding-right, padding-bottom 



Definition 


Cree un espacement respectivement sur la gauche, le haul, la droite ou le bas entre 
le contenu et la bordure d'un element. 




Appliquee a 


Tous les elements sauf les elements de tableau. 




Heritee 


Non. 




Syntaxe 


padding-left : <longueur> | N% | inherit. 




Valeurs 


N% 


Calcule par rapport a la largeur du bloc parent. 





Propriete padding 



Definition 


Raccourci permettant de definir toutes les caracteristiques des contours. On peut definir de 
une a quatre valeurs differentes. 


Appliquee a 


Tous les elements sauf les elements de tableau. 


Heritee 


Non. 


Syntaxe 


padding : [<longueur> | N%] {1,4} | inherit. 


Valeurs 


N% 


Valeur calculee par rapport a la largeur du bloc parent. 



Propriete page-break-after 



Definition 


Cree un saut de page apres un element donne. 




Appliquee a 


Les elements de bloc. 




Heritee 


Non. 




Syntaxe 


page-break-after : auto | always | avoid | left | right | inherit. 




Valeurs 


auto 


Le navigateur gere les sauts de page. 




always 


Saut de page apres chaque occurrence de I'element. 




avoid 


Pas de saut de page force. 




left 


Saut de page apres les pages de gauche. 




right 


Saut de page apres les pages de droite. 
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Propriete page-break-before 



Definition 


Cree un saut de page avant un element donne. 


Appliquee a 


Les elements de bloc. 


Heritee 


Non. 


Syntaxe 


page-break-before : auto | always | avoid | left | right | inherit. 


Valeurs 


Les memes que pour la propriete page-break-after. 



Propriete page-break-inside 



Definition 


Autorise un saut de page au milieu du contenu d'un element. 


Appliquee a 


Les elements de bloc. 


Heritee 


Oui. 


Syntaxe 


page-break-inside : avoid | auto | inherit. 


Valeurs 


avoid 


Saut de page interdit au milieu du contenu. 


auto 


Les sauts de page sont geres au mieux par le navigateur. 



Propriete position 



Definition 


Position d'un element dans son conteneur. 


Appliquee a 


Tous les elements. 


Heritee 


Non. 


Syntaxe 


position : absolute | fixed | relative | static | inherit. 


Valeurs 


absolute 


Positionnement absolu. 


fixed 


Positionnement fixe dans la fenetre du navigateur. 


relative 


Positionnement relatif par rapport a la position normale. 


static 


Positionnement normal. 



Propriete quotes 



Definition 


Determine le type des cotations (guillemets, apostrophes, ...) d'un contenu textuel et parti- 
culierement les citations. 


Appliquee a 


Tous les elements. 


Heritee 


Oui. 


Syntaxe 


quotes : [<chaine> <chaine>]? none inherit. 


Valeurs 


<chaine> <chaine> 


Indique les chaines de debut et de fin. 
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Propriete right 



Definition 


Position d'un element par rapport au bord droit de son conteneur. 




Appliquee a 


Les elements positionnes. 




Heritee 


Non. 




Syntaxe 


right : <longueur> | N% | auto | inherit. 




Valeurs 


N% 


Valeur calculee par rapport a la largeur de I'element parent. 





Propriete table-layout 



Definition 


Determine le choix de I'algorithme de calcul de la largeur d'un tableau. 


Appliquee a 


Les tableaux. 


Heritee 


Non. 


Syntaxe 


table-layout : auto | fixed | inherit. 


Valeurs 


auto 


La largeur depend du contenu des cellules. 


fixed 


La largeur totale ne depend pas du contenu des cellules mais du dimensionnement de 
celles-ci. 



Propriete text-align 



Definition 


Alignement horizontal du texte dans son conteneur. 


Appliquee a 


Les elements de bloc et cellules de tableau. 


Heritee 


Oui. 


Syntaxe 


text-align : left | center | right | justify. 


Valeurs 


left 


Texte aligne a gauche (valeur par defaut pour une lecture de gauche a droite, sinon c'est la 
valeur right). 


center 


Texte centre. 


right 


Texte aligne a droite. 


justify 


Texte justifie. 



Propriete text-decoration 



Definition 


Cree des effets decoratifs sur un texte. 




Appliquee a 


Tous les elements. 




Heritee 


Non. 




Syntaxe 


text-decoration : none | [underline | overline | line-through | blink] | inherit. 
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Valeurs 


underline 


Texte souligne. 




overline 


Texte surligne. 




line-through 


Texte barre. 





blink 



Texte clignotant. 



Propriete text-indent 



Definition 


Determine I'indentation du texte de I'element. 


Appliquee a 


Les elements de bloc, cellules de tableau et blocs en ligne. 


Heritee 


Oui. 


Syntaxe 


text-indent : <longueur> | N% | inherit. 


Valeurs 


N% 


Calcule par rapport a la largeur du bloc. 



Propriete text-transform 



Definition 


Transforme la casse du texte. 




Appliquee a 


Tous les elements. 




Heritee 


Oui. 




Syntaxe 


text-transform : capitalize | lowercase | uppercase | none | inherit. 




Valeurs 


capitalize 


Texte avec une majuscule au debut de chaque mot. 




lowercase 


Texte en minuscules. 




uppercase 


Texte en majuscules. 





Propriete top 


Definition 


Position par rapport au bord droit du conteneur. 


Appliquee a 


Les elements positionnes. 


Heritee 


Non. 


Syntaxe 


top : <longueur> | N% | auto | inherit. 


Valeurs 


N% 


Valeur calculee par rapport a la hauteur du bloc parent. 
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Propriete vertical-align 



Definition 


Alignement d'un contenu dans un element. 


Appliquee a 


Element en ligne et cellules de tableau. 


Heritee 


Non. 


Syntaxe 


vertical-align : baseline | bottom | middle | sub | super | text-bottom | text-top | top | N%. 


Valeurs 


baseline 


Alignement sur la ligne de base des caracteres. 


bottom 


Alignement sur le bas de la boite du texte. 


middle 


Alignement sur la ligne du milieu du texte minuscule. 


sub 


Alignement en indice. 


super 


Alignement en exposant. 


text-bottom 


Alignement sur le bas du texte. 


text-top 


Alignement sur le haut du texte. 


top 


Alignement sur le haut de la boite du texte. 


N% 


Calculee par rapport a la valeur de la propriete line-height. 



Propriete visibility 



Definition 


Determine la visibilite ou non d'un element. 


Appliquee a 


Tous les elements. 


Heritee 


Oui. 


Syntaxe 


visibility : collapse hidden | visible | inherit. 


Valeurs 


collapse 


Utilisee pour les elements <col /> et <colgroup> elle empeche la visibilite de toute la 
colonne. 


hidden 


Lelement est cache. 


visible 


Lelement est visible. 



Propriete width 



Definition 


Fixe la largeur d'un element. 




Appliquee a 


Tous les elements. 




Heritee 


Oui. 




Syntaxe 


width : <longueur> | N% | auto | inherit. 




Valeurs 


N% 


Valeur calculee par rapport a la largeur de I'element parent. 
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Propriete white-space 



Definition 


Permet de gerer I'affichage des espaces blancs multiples. 


Appliquee a 


Tous les elements. 


Heritee 


Oui. 


Syntaxe 


white-space : normal | pre nowrap pre-wrap | pre-line inherit. 


Valeurs 


normal 


Gestion habituelle : un seul espace est affiche quel qu'en soit le nombre. 


pre 


Tous les espaces et retours chariot sont conserves. 


nowrap 


Empeche les sauts de ligne. 


pre-wrap 


Les espaces du texte sont conserves mais pas les sauts de ligne. 



pre-line Les espaces multiples sont reduits a un seul mais les sauts de ligne sont conserves. 



Propriete word-spacing 



Definition 


Definit I'espacement ajoute ou retire entre les mots par rapport a la valeur normale issue de 
la police utilisee. 


Appliquee a 


Tous les elements. 


Heritee 


Oui. 


Syntaxe 


word-spacing : normal | <longueur> | inherit. 


Valeurs 


normal 


Espacement normal de la police utilisee. 



<longueur> Augmente ou diminue la valeur par defaut de I'unite precisee (la valeur peut etre negative). 



Propriete z-index 



Definition 


Cree I'ordre d'empilement d'un element par rapport aux autres en cas de positionnement. 


Appliquee a 


Les elements positionnes. 


Heritee 


Non. 


Syntaxe 


z-index : auto | N | inherit. 


Valeurs 


N 


Entier donnant I'ordre d'empilement, I'element ayant le plus grand etant place au dessus des 
autres. 


auto 


Le dernier apparu dans le code est place au dessus. 
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Pseudo-classes 



pseudo-element 


Permet d'appllquer un style 


X:active 


un element X qui devient actif. 


a:link 


a un lien <a> non actif (dans son etat initial). 


a:visited 


un lien <a> deja visite. 


X:hover 


un element X survole par le curseur. 


A .11 1 01 Ul 1 IIU 


i in olomont Y niii oct lo nromior onfcant /Hcanc I'nrrlro Hii rrtHo 1 — J "T N ^1 1 \ Ho cnn 
Uil clclllclll A LjUl CbL Ic fjlcllllcl Cllldlll ^Uctllo 1 UIUIC UU OUUc An 1 IvILJ Uc bUII 

element parent. 


A.IULUo 


I'plpmpnt ni li rppn.it Ip inn ic 
1 elemui 11 qui Ict^ull Ic lUUUb. 


X:lang(code) 


un element dont le code de langue a la valeur code. 


@page:first 


la premiere page imprimee d'un document (non prise en compte actuellement 
sauf par Opera). 


@page:left 


aux pages de gauche (done paires) d'un document imprime (non prise en 
compte actuellement sauf par Opera). 


@page:right 


aux pages de droite (done impaires) d'un document imprime (non prise en 
compte actuellement sauf par Opera). 


Pseudo-elements 


pseudo-element 


Permet d'appllquer un style 


X:after 


apres le contenu de I'element X. 


X:before 


avant le contenu de I'element X. 


X:first-letter 


a la premiere lettre du texte de I'element X. 


X:first-line 


a la premiere ligne d'un texte contenu dans I'element X. 
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Codes des couleurs 



Pour visualiser le rendu reel des couleurs presentees ci-apres, consul ter le site : 
http: //www.f unxhtml .com/coul eur. 

Les parametres de la fonction rgb() peuvent etre des pourcentages variant entre et 
100 % pour chaque couleur indiquee dans l'ordre RGB (Red, Green, Blue). 



Nom 


Code hexadecimal 


Code RGB decimal 


aliceblue 


FO F8 FF 


rgb(240,248,255) 


antiquewhite 


FA EB D7 


rgb(250,235,215) 


aqua 


00 FF FF 


rgb(0,255,255) 


aquamarine 


7F FF D4 


rgb(1 27,255,21 2) 


azure 


FO FF FF 


rgb(240,255,255) 


beige 


F5 F5 DC 


rgb(245,245,220) 


bisque 


FF E4 C4 


rgb(255,228,196) 


black 


00 00 00 


rgb(0,0,0) 


blanchedalmond 


FF EB CD 


rgb(255,255,205) 


blue 


00 00 FF 


rgb(0,0,255) 


blueviolet 


8A 2B E2 


rgb(1 38,43,226) 


brown 


A5 2A 2A 


rgb(1 65,42,42) 


burlywood 


DE B8 87 


rgb(222,184,135) 


cadetblue 


5F 9E AO 


rgb(95,158,160) 
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Nom 


Code hexadecimal 


Code RGB decimal 




chartreuse 


7F FF 00 


rgb(1 27,255,0) 




chocolate 


7F FF 00 


rgb(21 0,1 05,30) 




coral 


FF 7F 50 


rgb(255, 127,80) 




cornflowerblue 


64 95 ED 


rgb(1 00,1 49,237) 




cornsilk 


FF F8 DC 


rgb(255,248,220) 




crimson 


DC 14 3C 


rgb(220,20,60) 




cyan 


00 FF FF 


rgb(0,255,255) 




darkblue 


00 00 8B 


rgb(0,0,139) 




darkcyan 


00 8B 8B 


rgb(0,139,139) 




darkgoldenrod 


B8 86 0B 


rgb(184,134,11) 




darkgray 


A9 A9 A9 


rgb(1 69,1 69,1 69) 




darkgreen 


00 64 00 


rgb(0,100,0) 




darkkhaki 


BD B7 6B 


rgb(189,183,107) 




darkmagenta 


8B 00 8B 


rgb(139,0,139) 




darkolivegreen 


55 6B 2F 


rgb(85,107,47) 




darkorange 


FF 8C 00 


rgb(255,140,0) 




darkorchid 


99 32 CC 


rgb(1 53,50,204) 




darkred 


8B 00 00 


rgb(1 39,0,0) 




darksalmon 


E9 96 7A 


rgb(233, 150,1 22) 




darkseagreen 


8F BC 8F 


rgb(143,188,143) 




darkslateblue 


48 3D 8B 


rgb(72,61,139) 




darkslategray 


2F4F4F 


rgb(47,79,79) 




darkturquoise 


00 CE D1 


rgb(0,206,209) 




darkviolet 


94 00 D3 


rgb(1 48,0,211) 




deeppink 


FF 14 93 


rgb(255,20,147) 




deepskyblue 


00 BF FF 


rgb(0,191,255) 




dimgray 


69 69 69 


rgb(1 05,1 05,1 05) 




dodgerblue 


1E90 FF 


rgb(30,1 44,255) 




firebrick 


B2 22 22 


rgb(1 78,34,34) 




floralwhite 


FF FA F0 


rgb(255,250,240) 




forestgreen 


22 8B 22 


rgb(34, 139,34) 




fuchsia 


FF 00 FF 


rgb(255,0,255) 
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Nom 


Code hexadecimal 


Code RGB decimal 


gainsboro 


DC DC DC 


rgb(220,220,220) 


ghostwhite 


F8 F8 FF 


rgb(248,248,255) 


gold 


FF D7 00 


rgb(255,215,0) 


goldenrod 


DA A5 20 


rgb(21 8,1 65,32) 


gray 


80 80 80 


rgb(127,127,127) 


green 


00 80 00 


rgb(0, 128,0) 


greenyellow 


AD FF2F 


rgb(1 73,255,47) 


honeydew 


F0 FF F0 


rgb(240,255,240) 


hotpink 


FF 69 B4 


rgb(255,105,180) 


indianred 


CD 5C 5C 


rgb(205,92,92) 


ivory 


FF FF F0 


rgb(255,255,240) 


khaki 


F0 E6 8C 


rgb(240,230,140) 


lavender 


E6 E6 FA 


rgb(230,230,250) 


lavenderblush 


FF F0 F5 


rgb(255,240,245) 


lawngreen 


7C FC 00 


rgb(1 24,252,0) 


lemonchiffon 


FF FA CD 


rgb(255,250,205) 


lightblue 


AD D8 E6 


rgb(1 73,21 6,230) 


lightcora 


F0 80 80 


rgb(240,128,128) 


lightcyan 


E0 FF FF 


rgb(224,255,255) 


lightgoldenrodyellow 


FA FA D2 


rgb(250,250,210) 


lightgreen 


90 EE 90 


rgb(144,238,144) 


lightgrey 


D3 D3 D3 


rgb(21 1,21 1,211) 


lightpink 


FF B6 C1 


rgb(255,1 182,193) 


lightsalmon 


FF AO 7A 


rgb(255,160,122) 


lightseagreen 


20 B2 AA 


rgb(32,178,170) 


lightskyblue 


87 CE FA 


rgb(1 35,206,250) 


lightslategray 


77 88 99 


rgb(119,136,153) 


lightsteelblue 


B0 C4 DE 


rgb(1 76,1 96,222) 


lightyellow 


FF FF E0 


rgb(255,255,224) 


lime 


00 FF 00 


rgb(0,255,0) 


limegreen 


32 CD 32 


rgb(50,205,50) 


linen 


FA F0 E6 


rgb(250,240,230) 
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Nom 


Code hexadecimal 


Code RGB decimal 




magenta 


FF 00 FF 


rgb(255,0,255) 




maroon 


80 00 00 


rgb(1 28,0,0) 




mediumaquamarine 


66 CD AA 


rgb(1 02,205, 170) 




mediumblue 


00 00 CD 


rgb(0,0,205) 




mediumorchid 


BA 55 D3 


rgb(1 86,85,211) 




mediumpurple 


93 70 DB 


rgb(1 47,1 12,219) 




mediumseagreen 


3C B3 71 


rgb(60,179,113) 




mediumslateblue 


7B 68 EE 


rgb(1 23, 104,238) 




mediumspringgreen 


00 FA 9A 


rgb(0,250,154) 




mediumturquoise 


48 D1 CC 


rgb(72,209,204) 




mediumvioletred 


C7 15 85 


rgb(1 99,21, 133) 




midnightblue 


19 1970 


rgb(25,25,112) 




mintcream 


F5 FF FA 


rgb(245,255,250) 




mistyrose 


FF E4 E1 


rgb(255,228,225) 




moccasin 


FF E4 B5 


rgb(255,228,181) 




navajowhite 


FF DE AD 


rgb(255,222,173) 




navy 


00 00 80 


rgb(0,0,128) 




oldlace 


FD F5 E6 


rgb(253,245,230) 




olive 


80 80 00 


rgb(128,128,0) 




olivedrab 


6B 8E 23 


rgb(107,142,35) 




orange 


FF A5 00 


rgb(255, 165,0) 




orangered 


FF 45 00 


rgb(255,69,0) 




orchid 


DA 70 D6 


rgb(21 8,1 12,214) 




palegoldenrod 


EE E8 AA 


rgb(238,232,170) 




palegreen 


98 FB 98 


rgb(1 52,251, 152) 




paleturquoise 


AF EE EE 


rgb(1 75,238,238) 




palevioletred 


DB 70 93 


rgb(21 9,1 12,147) 




papayawhip 


FF EF D5 


rgb(255,239,213) 




peachpuff 


FF DA B9 


rgb(255,218,185) 




peru 


CD 85 3F 


rgb(205,1 33,63) 




pink 


FF CO CB 


rgb(255,1 92,203) 




plum 


DD AO DD 


rgb(221, 160,221) 
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Norn Code hexadecimal Code RGB decimal 



nnvi/Hprhli ip 


Dfi FO Ffi 

DU CU CO 


rnhM 7fi 994 9ftn^ 
i y u\ i / o,£tt,£ouy 


[JUI LJIU 


on nn ftn 

ou uu ou 


rnhM 9ft n 19fil 
i y u\ i to,u, i CO) 


r6d 


ff nn nn 

rr uu uu 


i y u^£- JvJ,u,uy 


I UoyUi uwi I 


Dp pp pp 

do or or 


rnhMfifi 149 1491 
i y u\ i oo, i ho, i ho j 


lUydlUlUc 


41 69 E1 


rnh/R^ 1 n^ 99R1 


bdUUIUIJI UWI 1 


RR 4R 1 9 

OD HO I 


rnhM9Q fiQ 1Q1 
i y u^ i oj?,ucj, i zj) 


bdll 1 IUI 1 


FA 80 72 


rnh/9Rn 1 9ft 1 1 41 
lyu^ou, i to, i i hj 


bal luyUi UWI 1 


F4 A4 fin 
r*+ /AH ou 


rnh/944 1 R4 QR1 

I y U^£-HH, I OH,CJO^ 


bcay l ccl l 


2E 8B 57 


rnh/4fi 1 99 R71 

I y U^HO, I 03,0/ } 


boaol icll 


pp pg p_p_ 


rnhfPRS 94R 99ftl 
i y u^oo,£-Ho,^ooj 


blcl II la 


An ^9 9n 

ttU J£ 


rnhM fin ft9 4^1 
i y u^ i Ou,ot,tj^ 




rn rn rn 

ou ou ou 


rnhMQ9 1 Q9 199^ 

iyU^ I Oil. I V£L. I CJt^ 


ckuhli iP 
br\yuiuc 


87 CE EB 


rnhM 9R 9nfi 99^ 
i y u\ i oo,£.uo,^ooy 


cl Qtphll IP 


ra ^a rn 

Ort Or\ OU 


rnhM nfi Qn 00^ 

I y U^ I UD,3U,tUJj 




70 fin Qn 

/ U OU c/U 


rnhM 19 1 9ft 1441 
iyu^i 1 c. ■ 1 <—0 . 1 HH J 




pp PA PA 


rnh/9RS 9^n 9^ni 


bui ii lyy i eel i 


00 FF 7F 


rnh/n 1971 


ctpplhli ip 
blcclUlUc 


4fi ft? R4 

tO Ol DH 


rnh/7n 1 9n 1R01 
i y u\ i u, i ou, i ou^ 


tan 


D9 R4 ftp 

\JC DH OO 


rnh/9in 1 ftn 1401 
i y u\t- i u, i ou, i huj 


Leal 


nn ftn ftn 

uu ou ou 


rnh/n 19ft 19R1 
i y u^u, i co, i co) 


thktlp 
LI UoLlG 


Dft RF lift 

UO DT UO 


rnh/91fi 1Q1 91fil 

[ y U\t- I D. I 3 I .C. I U j 


tnmatn 

LUI 1 Id IU 


FF 63 47 


rnh^S 99 71 \ 


ti irm mica 
LUI LjUUIoC 


d.n Fn nn 

HU CU L*U 


rnh/R4 994 9nft^ 

1 y U^OH,££-H,£UOy 


violet 


EE 82 EE 


rgb(238,1 30,238) 


wheat 


F5 DE B3 


rgb(245,222,179) 


white 


FF FF FF 


rgb(255,255,255) 


whitesmoke 


F5 F5 F5 


rgb(245,245,245) 


yellow 


FF FF 00 


rgb(255,255,0) 


yellowgreen 


FF FF 00 


rgb(1 39,205,50) 
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Psiractora 


Pnrip 


Fntitp 


f^ni'ai^tpi'p 


Pnrip 


Fntitp 

d Hilt? 


I 


! 






" 


Squot; 


# 


# 




$ 


$ 




% 


% 




& 


& 


Samp; 




&#39; 




( 


( 




) 


) 




* 


* 




+ 


+ 






, 






- 






. 




/ 


/ 







0 




1 


1 




2 


2 




3 


3 




4 


4 




5 


5 




6 


6 




7 


7 




8 


8 




9 


9 






: 






; 




< 


< 


< 




= 




> 


> 


> 


? 


? 




@ 


@ 




A 


A 




B 


B 




C 


C 




D 


D 
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Caractere Code Entite Caractere Code Entite 



E 


E 




F 


F 




G 


G 




H 


H 




1 


I 




J 


J 





K 


K 




L 


L 





M 


M 




N 


N 








O 




P 


P 





Q 


&#81 ; 




R 


R 





S 


S 




T 


T 




U 


U 




V 


V 





w 


W 




X 


X 





Y 


Y 




z 


Z 





[ 


&#91 ; 




\ 


\ 





] 


] 






^ 







- 


_ 






` 




a 


a 




b 


b 





c 


c 




d 


&#1 00; 





e 


&#101 ; 




f 


&#1 02; 





g 


g 




h 


&#1 04; 





i 


i 




j 


&#1 06; 





k 


&#1 07; 




I 


&#1 08; 





m 


m 




n 


&#1 10; 








&#1 1 1 ; 




P 


&#1 12; 





q 


&#1 13; 




r 


&#1 14; 





s 


&#1 15; 




t 


&#1 16; 





u 


&#1 17; 




V 


&#1 18; 





w 


&#1 19; 




X 


&#1 20; 




y 


cxff I <L I , 




z 


o #H no. 
aff I 




{ 


{ 




I 


&#1 24; 




} 


} 






~ 




€ 


&#128; 


Seuro; 




&#1 30; 






&#131; 






&#1 32; 






&#133; 




t 


&#134; 
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Caractere 


Code 


Entite 


Caractere 


Code 


Entite 


t 


&#135; 






&#1 36; 




/oo 


&#137; 




s 


&#138; 




< 


&#139; 




CE 


&#140; 






&#141; 




Z 


&#142; 







&#145; 






&#146; 







&#147; 






&#148; 







&#149; 






&#150; 






&#151; 






&#152; 






&#1 53; 




s 


&#1 54; 




> 


&#155; 




ce 


&#1 56; 






&#157; 




z 


&#158; 




— 

Y 


&#159; 




espace 


  


  


i 


¡ 


¡ 


$ 


¢ 


Scent; 


£ 


&#1 63; 


£ 


» 


¤ 


Scurren; 


¥ 


&#1 65; 


¥ 


I 


&#1 66; 


Sbrvbar; 


§ 


&#1 67; 


§ 




&#1 68; 


¨ 


© 


&#1 69; 


Scopy; 


a 


&#1 70; 


Sordf; 


« 


&#1 71 ; 


Slaquo; 




&#1 72; 


Snot; 




&#1 73; 


­ 


® 


&#1 74; 


® 




&#1 75; 


Smacr; 




° 


° 




+ 


&#1 77; 


Splusmn; 


2 


² 


² 


3 


&#1 79; 


³ 




´ 


Sacute; 


M 


&#1 81 ; 


µ 


11 


¶ 


Spara; 




· 


· 


* 


¸ 


¸ 





¹ 


¹ 





º 


Sordm; 


» 


&#1 87; 


Sraquo; 


'A 


&#1 88; 


¼ 




½ 


&frac1 2; 


% 


¾ 


¾ 


i 


&#191 ; 


Siquest; 


A 


&#1 92; 


SAgrave; 


A 


Á 


&Aaoute; 


A 


Â 


SAoirc; 


A 


Ã 


Ã 


A 


Ä 


SAuml; 


A 


Å 


Å 


/E 


Æ 


SAelig; 


C 


Ç 


Ç 


E 


È 


& Eg rave; 
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Caractere 


Code 


Entite 


Caractere 


Code 


Entite 




E 


&#201 ; 


É 


E 


Ê 


SEcirc; 




E 


Ë 


SEuml; 


i 


Ì 


Slgrave; 




1 


Í 


& I acute; 


i 


Î 


Slcirc; 




i 


Ï 


&luml; 


-D 


Ð 


Ð 




N 


Ñ 


SNtilde; 


6 


Ò 


SOgrave; 




6 


Ó 


SOacute; 


6 


Ô 


SOcirc; 







Õ 


SOtilde; 





Ö 


SOuml; 




X 


× 


Stimes; 





Ø 


Ø 




u 


Ù 


Ù 


u 


Ú 


SUacute; 




u 


Û 


SUoirc; 





Ü 


SUuml; 




Y 


&#221 ; 


Ý 


\> 


Þ 


Þ 




13 


ß 


Sszlig; 


a 


à 


Sag rave; 




a 


á 


Saacute; 


a 


â 


Sacirc; 




a 


ã 


Satilde; 


a 


ä 


Sauml; 




a 


å 


Saring; 


33 


æ 


Saelig; 




g 


&#231 ; 


Sccedil; 


e 


è 


Segrave; 




e 


é 


Seacute; 


e 


ê 


Secirc; 




e 


ë 


Seuml; 


i 


ì 


Sigrave; 




i 


í 


Siacute; 


i 


î 


Sicirc; 




I 


ï 


Siuml; 


3 


ð 


ð 




n 


&#241 ; 


Sntilde; 


6 


ò 


Sograve; 




6 


ó 


Soacute; 


6 


ô 


Socirc; 







õ 


Sotilde; 





ö 


Souml; 






÷ 


Sdivide; 





ø 


Soslash; 




u 


ù 


Sugrave; 


u 


ú 


Suacute; 




u 


&#251 ; 


Sucirc; 


u 


ü 


Suuml; 




y 


ý 


Syacute; 




þ 


Sthorn; 




y 


ÿ 


Syuml; 


€ 


€ 


Seuro; 
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Bibliographie 

• Referencement sur le net de Sandrine Saporta aux Editions d' Organisation. 

• Creer du trafic sur son site web de Olivier Andrieu telechargeable sur le site : 
http://www.boutique-abondance.com. 

• JavaScript - Les references du programmeur de Jean Engels aux Editions OEM 

• PHP 5 - Cours et exercices de Jean Engels aux Editions Eyrolles 

• CSS - La reference de Eric Meyer aux Editions O'Reilly 

Adresses utiles 

• Les fichiers du livre : vous y trouverez les fichiers du livre a telecharger et a africher 
dans votre navigateur : 

http://www.funhtml .com/xhtml 

• Specifications XHTML du World Wide Web Consortium (W3C) : 
http://www.w3.org/TR/xhtml 1/ 

• Specifications CSS 2. 1 du World Wide Web Consortium (W3C) : 
http://www.w3.org/TR/CSS21/ 
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• Telechargement des differents navigateurs : 

- Mozilla : http://www.mozilla.0rg/releases/#l.7.ll 

- FireFox : http://www.mozilla.org/products/firefox/all.html 

- Opera: http://www.opera.com/download/ 

- Internet Explorer : http://www.microsoft.com/downloads 

• Des applets Java : 
http://www.gamelan.com 

• Des scripts JavaScript : 
http://javascriptsource.com 
http://www.javascript.com 

• Utilitaires pour le choix des couleurs et CSS2 en francais : 
http://www.yoyodesign.org 

http: //www. 1 i ghthouse.org/ col or_contrast . htm 

• Des scripts PHP : 
http://www.funhtml .com/php5 
http://www.nexen.net 
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Symboles 

! important (declaration) 245 
:active (pseudo-classe) 243, 325 
:after (pseudo-element) 245, 397 
:before (pseudo-element) 245, 397 
:first (pseudo-classe) 429 
:first-child (pseudo-classe) 244 
:first-letter (pseudo-element) 244 
:first-line (pseudo-element) 245 
:focus (pseudo-classe) 243, 325 
:hover (pseduo-classe) 360 
:hover (pseudo-classe) 243, 325 
:lang (pseudo-classe) 244 
:left (pseudo-classe) 429 
:link (pseudo-classe) 243, 325 
:right (pseudo-classe) 429 
:visited (pseudo-classe) 243, 325 
<a> (element) 107 
<abbr> (element) 60 
<acronym> (element) 61 
<address> (element) 57, 130 
<area/> (element) 89, 90, 126, 

127, 173 
<b> (element) 68 
<base /> (element) 28 
<bdo> (element) 61 
<big> (element) 68 
<blockquote> (element) 53 
<body> (element) 23, 39, 207 
<br /> (element) 69 



<button> (element) 94, 95, 123, 
172 

<caption> (element) 136, 366, 370 
<cite> (element) 61 
<code> (element) 62 
<col /> (element) 147, 160, 162 
<colgroup> (element) 147, 160, 
370 

<dd> (element) 78 

<del> (element) 57 

<dfn> (element) 62 

<div> (element) 5 1 

<dl> (element) 78 

<dt> (element) 78 

<em> (element) 68 

<fieldset> (element) 58, 167, 195 

<form> (element) 58, 167 

<frame /> (element) 207, 208 

<frameset> (element) 207 

<hl> (element) 45 

<h2> (element) 45 

<h3> (element) 45 

<h4> (element) 45 

<h5> (element) 45 

<h6> (element) 45 

<head> (element) 23, 28 

<html> (element) 23, 27 

<i> (element) 68 

<img /> (element) 84, 124 



<input /> (element) 171 

type checkbox 1 84 

type file 194 

type hidden 192 

type image 173 

type password 179 

type radio 183 

type reset 173 

type submit 172 

type text 176 
<ins> (element) 57 
<kbd> (element) 62 
<label> (element) 176, 182 
<legend> (element) 58, 168 
<li> (element) 71, 73, 389 
<link/> (element) 29, 418 
<link> (element) 28 
<map> (element) 126, 127, 173 
<meta /> (element) 3 1 
<meta> (element) 28 
<noframes> (element) 207, 208 
<noscript> (element) 223 
<object> (element) 92, 96, 98, 
101, 102 

enfants 92 

parents 92 
<ol> (element) 71, 75, 389 
<optgroup> (element) 190 
<option> (element) 186 
<p> (element) 49 
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<param/> (element) 92, 103 

<pre> (element) 55 

<q> (element) 63 

<samp> (element) 63 

<script> (element) 28, 34, 132 

<select> (element) 186 

<small> (element) 68 

<span> (element) 63 

<strong> (element) 68 

<style> (element) 28, 35, 246, 418 

<sub> (element) 69 

<sup> (element) 69 

<table> (element) 135, 156, 159, 

160, 162 
<tbody> (element) 141, 145 
<td> (element) 136 
<textarea> (element) 181 
<tfoot> (element) 141, 145 
<th> (element) 136 
<thead> (element) 140, 145 
<title> (element) 23, 28, 36 
<tr> (element) 136 
<tt> (element) 69 
<ul> (element) 73, 75 
<var> (element) 64 
©import (directive) 246 
©media (directive) 418 
@page (directive) 429 

A 

abreviation 60 

accept (attribut) 171, 194 

accept-charset (attribut) 171 

accesskey (attribut) 89, 172 

acronyme 61 

action (attribut) 169, 190 

align (attribut) 141, 145 

alignement 

dans les tableaux 145 

des symboles de numerotation 
395 

alt (attribut) 85, 89 
ancre 116 

navigation 

dans une page 1 17 
entre plusieurs pages 119 
animation Flash 97 

inclusion 97 
applet 102 

insertion 102 

Java 96 



attribut 8 

accept 171, 194 
accept-charset 171 
accesskey 89, 172 
action 169, 190 
align 141, 145 
alt 85, 89 
border 138, 370 
cellpadding 138 
cellspacing 138 
char 141 
charoff 141 
charset 29, 34 
checked 183, 184 
class 10 
classid 99, 103 
codebase 99 
codetype 103 
cols 181, 207 
colspan 150 
content 32 
coords 89, 110, 126 
d'internationalisation 10 
data 92 
defer 34 
dir 10, 28 

disabled 177, 181, 183, 184, 
187 

enctype 171, 194, 195 
frame 138, 141, 147 
frameborder 208, 214 
height 85 

href 29, 89, 112, 116, 129 
hreflang 29, 110 
http-equiv 32 
id 10, 170 
ismap 86 
label 190 
longdesc 85, 208 
marginheight 208 
marginwidth 208 
maxlength 176, 179 
media 29, 30, 35,418 
method 170, 194 
multiple 187 
name 32, 172, 176, 181 
nohref 89, 127 
noresize 208 
onblur90, 177, 183, 187 
onchange 177, 181, 184, 187 
onclick 10, 95 
ondblclick 10 



onfocus 90, 177, 181, 183, 187 

onkeydown 10 

onkeypress 10 

onkeyup 10 

onload 207 

onmousedown 11 

onmousemove 11 

onmouseout 11 

onmouseover 1 1 

onmouseup 11 

onreset 171 

onselect 181, 184 

onsubmit 171 

onunload 207 

profile 29 

readonly 177, 181, 183 
rel29, 110 
rev 29, 110 
rows 181, 207 
rowspan 150, 153 
rules 138, 141, 147 
scrolling 208 
selected 188 
selecteur de valeur 236 
shape 89, 110, 126 
size 176, 179, 187, 194 
span 147 
src 85, 208 
standby 93, 97 
style 10, 247 
summary 139 
tabindex 89, 172, 187 
target 129, 221 
title 10 

type 29, 35, 93, 95, 172 

usemap 86, 127, 128 

valign 141, 145 

value 173, 176, 183, 192 

width 85, 138, 147, 160, 162 

xml 

lang 10, 27 

preserve 36 

space 35 
xmlns 28 
audio 100 

B 

background (propriete) 273 
background-attachement 

(propriete) 271 
background-color (propriete) 260, 

366 
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background-position (propriete) 
266 

background-repeat (propriete) 264 
balise 8 

barre de defilement 334 
base (element) 28 
Berners-Lee, Tim 8 
bloc de citation 53 
border 

attribut 138, 370 

propriete 284, 370 
border-bottom (propriete) 285 
border-bottom-color (propriete) 
283 

border-bottom-style (propriete) 
279 

border-bottom- width (propriete) 
281 

border-collapse (propriete) 372 
border-color (propriete) 258, 283 
border-left (propriete) 285 
border-left-color (propriete) 283 
border-left-style (propriete) 279 
border-left-width (propriete) 281 
border-right (propriete) 285 
border-right-color (propriete) 283 
border-right-style (propriete) 279 
border-right- width (propriete) 28 1 
border-spacing (propriete) 372 
border-style (propriete) 277 
border-top (propriete) 284 
border-top-color (propriete) 283 
border-top-style (propriete) 279 
border-top- width (propriete) 28 1 
border- width (propriete) 281 
bordure 275, 276, 277 

basse 279, 281 

conflits 377 

couleur 283 

definition globale 284 

des cellules 372 

droite 279, 283 

fusionnee 376 

gauche 279, 281,283,285 

haute 279 

largeur 281 

separee 372 

style de 277 
bottom 

mot-cle 267 

propriete 345 
bouton radio 183 



C 

cadre 205 

horizontal 209 
imbrique 215, 217 
page avec 206 
vertical 212 
caption-side (propriete) 370 
cascade 248 

regies de priorite 249 
selection 
par specificite 250 
selon l'ordre d'apparition 
251 

selon le createur du style 249 
selon le media 249 
Cascading Style Sheets 229 
case a cocher 183 
casse des identifiants 236 
cellpadding (attribut) 138 
cellspacing (attribut) 138 
cellule (de tableau) 136 
center (mot-cle) 266 
champ cache 192 
char (attribut) 141 
charoff (attribut) 141 
charset (attribut) 29, 34 
checked (attribut) 183, 184 
citation 61 

courte 63 
class (attribut) 10 
classe 233 

application 

a un element 233 

au meme element 234 

definition 233 
classid (attribut) 99, 103 
clear (propriete) 343 
codebase (attribut) 99 
codetype (attribut) 103 
color (propriete) 258 
cols (attribut) 181, 207 
colspan (attribut) 150 
commentaires 24, 3 1 
communication entre les cadres 

220 
composant 

de saisie de texte 175 

des formulaires 171 
compteur 396 

creation de 396 



conteneur de variables 64 
content (attribut) 32 
contenu 

debordement 332 

imprimer 417 
contour 275, 292 

couleur 293 

largeur 293 

style 292 
coords (attribut) 89, 110, 126 
couleur 253 

arriere-plan 260 

code hexadecimal 253 

composantes 253 

d'avant-plan 257 

de fond 257, 260 

de police 257 

des bordures 283 

du contour 293 

du texte 258 

mots-cles 253 

transparence 260 
counter() (fonction) 397 
counter-increment (propriete) 397, 
401 

counter-reset (propriete) 396, 401 
counters() (fonction) 401 
creation 

d'un menu 409 

de styles 230 
CSS 8 

D 

data (attribut) 92 
declaration 

[important 245 

d'un style 230 

des proprietes 230 

DOCTYPE 26 

XML 24 
defer (attribut) 34 
definitions en ligne 62 
dir (attribut) 10, 28 
directive 

©import 246 

©media 418 

@page 429 
disabled (attribut) 177, 181, 183, 

184, 187 
display (propriete) 336, 370, 389, 
406,411,419 
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division 

de bloc locale 53 
de la page 48 
en ligne 63 

semantique en ligne 60 
DOCTYPE 26, 207 
document 

bien forme 12 

conforme 13 

corps 39 

en-tete 36 

lie 29 

validation 14 
DTD (Document Type Definition) 
8 

XHTML 

1.0 Frameset 206,217 
1.0 Frameset 27 
1 .0 strict 26, 27 

1.0 Transitional 27 

1.1 26 

E 

echange de donnees 167 
editeur visuel 15 
element 8, 89, 145, 173 

<a> 107 

<abbr> 60 

<acronym> 61 

<address> 57, 130 

<area/>90, 126, 127, 173 

<b> 68 

<base /> 28 

<base> 28 

<bdo> 61 

<big> 68 

<blockquote> 53 

<body> 23, 39, 207 

<br /> 69 

<button>94, 95, 123, 172 
<caption> 136, 366, 370 
<cite> 61 
<code> 62 

<col/> 147, 160, 162 

<colgroup> 147, 160, 370 

<dd> 78 

<del> 57 

<dfn> 62 

<div> 5 1 

<dl> 78 

<dt>78 

<em> 68 



<fieldset> 58, 167, 195 

<form> 58, 167 

<frame /> 207, 208 

<frameset> 207 

<hl>45 

<h2> 45 

<h3> 45 

<h4> 45 

<h5> 45 

<h6> 45 

<head> 23, 28 

<html> 23, 27 

<i> 68 

<img/> 84, 124 
<input/> 171 
<ins> 57 
<kbd> 62 
<label> 176, 182 
<legend> 58, 168 
<li> 71, 73, 389 
<link /> 29, 418 
<link> 28 
<map> 126, 127 
<meta /> 3 1 
<meta> 28 

<noframes> 207, 208 
<noscript> 223 
<object>92, 96, 98, 101, 102 
<ol>71,75, 389 
<optgroup> 190 
<option> 186 
<p> 49 

<param /> 92, 103 
<pre> 55 
<q> 63 
<samp> 63 
<script>28, 34, 132 
<select> 186 
<small> 68 
<span> 63 
<strong> 68 

<style> 28, 35, 246,418 
<sub> 69 
<sup> 69 

<table> 135, 156, 159, 160, 
162 

<tbody> 141, 145 
<td> 136 
<textarea> 181 
<tfoot> 141, 145 
<th> 136 
<thead> 140 



<title> 23, 28, 36 

<tr> 136 

<tt> 69 

<ul> 73, 75 

<var> 64 

boite d'un 275 

contenu 276 

de bloc 58 

de type bloc 336 

de type liste 336 

dimensionnement 330 

en ligne 60, 336 

encombrement total d'un 277 

flottant 339 

hauteur 

maximale 334 

minimale 334 
largeur 

maximale 334 

minimale 334 
positionnement 338 
rendu 336 
vide 12 
e-mail 129 

empty-cells (propriete) 366, 373 
enctype (attribut) 171, 194, 195 
en-tete 

de tableau 136 

du document 28 
espacement 275, 276, 289 

bas 290 

des caracteres 321 

des mots 321 

droit 290 

gauche 290 

haut 290 
exemple en ligne 63 
exposant (mettre en ) 69 
extension 

.html ou .htm 24 

.js34 

.xml 24 

F 

famille de polices 297 
feuille de style 30 

ecriture 246 

en cascade 229 
fichiers (transfert) 193 
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first-letter (pseudo-element) 301 
fixed (mot-cle) 27 1 
Flash 97 

lien vers une animation 1 14 
float (propriete) 289, 339 
flottant (element) 339 
flottement 339 

empecher le 343 
fonction 

counterO 397 

counters() 401 

rgb() 254 

url() 262 
font (raccourci) 316 
font-family (propriete) 297, 419 
font-size (propriete) 300, 314, 419 
font-style (propriete) 310 
font- variant (propriete) 312 
font-weight (propriete) 308 
formulaires 167 

bouton 

d'envoi 171 

de reinitialisation 171 

radio 183 

case a cocher 183 

composants 171 

de saisie de texte 175 

et tableau 199 

presentation des 384 

saisie 
de mot de passe 179 
de texte 181 

structure 168 
frame (attribut) 138, 141, 147 
frameborder (attribut) 208, 214 
FTP 18 

fusion de lignes 153 
G 

gestion des espaces 322 
gestionnaire d'evenements 10 
GIF (Graphics Interface Format) 83 
groupe de colonnes 147 

H 

hauteur de la boite d'un element 
276 

hebergement du site 18 
height 

attribut 85 

propriete 276, 330 



heritage 248, 252 

de l'image de fond 262 
href (attribut) 29, 89, 112, 116, 
129 

hreflang (attribut) 29, 110 
http-equiv (attribut) 32 

I 

icone 30 

id (attribut) 10, 170 
image 

bouton 94 
de fond 262 
defilement 27 1 
position 

horizontale 267 
verticale 267 
positionnement 264, 268 
repetition 264 
dimensions 85 
GIF 83 
insertion 83 

insertion en tant qu'objet 93 

JPEG 84 

objet 91 

PNG 84 

poids 84 

reactive 88 

types 83 
imbrication de tableaux 156 
impression 

adapter les styles 418 

apercu avant 421 

en-tete 422 

pseudo-classe 429 

saut de page 425 
inclusion de code source 62 
indice (mettre en ) 69 
inside 393 

interligne (modifier) 314 
ismap (attribut) 86 

J 

Java 102 

JavaScript 31, 34, 223 
javascript: 

mot-cle 132 

protocole 132 
JPEG (Joint Photographic Experts 
Group) 84 



L 

label (attribut) 190 
largeur 

d'un tableau 379 

de bordure 28 1 

de la boite du contenu 276 

du contour 293 
left 

mot-cle 266 

propriete 345 
letter-spacing (propriete) 321 
lien 

a partir d'un bouton 123 
a partir d'un texte 107 
a partir d'une image 123, 124, 
127 

carte de liens 126 
externe 108 
hypertexte 107 
style de 324 
vers un e-mail 129 
vers un script JavaScript 132 
line-height (propriete) 314 
liste 71, 389 

a puces 73, 404 

circle 404 

disc 404 

graphiques 406 

square 404 
de definitions 78 
de selection 186 
deroulante 186 
imbriquee 75, 80, 390 
mixte 408 
non ordonnee 73 
numerotation 389, 397 

alignement des symboles 
395 

alphabetique 390 
en caracteres armeniens 390 
en caracteres georgiens 390 
en caracteres grecs 390 
en chiffres romains 390 
style 392 
supprimer 390 
ordonnee 71, 390 
list-style-image (propriete) 406 
list-style-position (propriete) 393, 
405 

list-style-type (propriete) 389 
longdesc (attribut) 85, 208 
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M 

Macromedia Flash Player 97 
mailto: (protocole) 129, 131, 193 
marge 275, 276, 286 

basse 287 

droite 287 

haute 287 
margin (propriete) 287 
margin-bottom (propriete) 287 
marginheight (attribut) 208 
margin-left (propriete) 287 
margin-right (propriete) 287 
margin-top (propriete) 287 
marginwidth (attribut) 208 
max-height (propriete) 334 
maxlength (attribut) 176, 179 
max-width (propriete) 334 
media 

attribut 29, 30, 35,418 

cibler un 418 

continu 417 

pagine 417 
menu 389, 409 
meta-informations 31 
method (attribut) 170, 194 
methode post 194 
MIDI, fichier 102 
min-height (propriete) 334 
min-width (propriete) 334 
mise en page 329 

avec des cadres 215 

complexe en cinq zones 354 

dimensionnement 329 

en deux blocs horizontaux 349 

en trois zones 352 

positionnement 329 
mise en place du site 1 8 
modele CSS des boTtes 275 
mot de passe 179 
mot-cle 32 

bottom 267 

center 266 

fixed 271 

javascript: 132 

left 266 

no-repeat 265 

repeat-x 265 

repeat-y 265 

right 266 

scroll 271 

subject 130 



top 267 

transparent 260 
moteur de recherche 33 
MP3 96 
multimedia 

element 96 

insertion 83 
multiple (attribut) 187 

N 

name (attribut) 32, 172, 176, 181 
navigation 127 

dans une page 1 17 
nohref (attribut) 89, 127 
no-repeat (mot-cle) 265 
noresize (attribut) 208 

O 

onblur (attribut) 90, 177, 183, 187 
onchange (attribut) 177, 181, 184, 
187 

onclick (attribut) 10, 95 
ondblclick (attribut) 10 
onfocus (attribut) 90, 177, 181, 183, 
187 

onkeydown (attribut) 10 
onkeypress (attribut) 10 
onkeyup (attribut) 10 
onload (attribut) 207 
onmousedown (attribut) 1 1 
onmousemove (attribut) 1 1 
onmouseout (attribut) 1 1 
onmouseover 

attribut 1 1 

evenement 95 
onmouseup (attribut) 1 1 
onreset (attribut) 171 
onselect (attribut) 181, 184 
onsubmit (attribut) 171 
onunload (attribut) 207 
option d'une liste 187 
ordre d'empilement 359 
orphans (propriete) 428 
outline-color (propriete) 293 
outline-style (propriete) 292 
outline-width (propriete) 293 
outside 393 

overflow (propriete) 332, 334, 380 
P 

padding (propriete) 289 
padding-bottom (propriete) 290 



padding-left (propriete) 290 
padding-right (propriete) 290 
padding-top (propriete) 290 
page-break-after (propriete) 425 
page-break-before (propriete) 425 
page-break-inside (propriete) 427 
paragraphe 49 

PDF, lien vers un document 113 
PHP 25, 195 
plug-in 94 

PNG (Portable Network Graphics) 

84 
police 

a espacement fixe 69 
de caracteres 297 
families de 297 
generique 297 
style de 310 
sy steme 316 
taille 300 
absolue 300 
dimensionnee 305 
en pourcentage 306 
relative 302 
position (propriete) 289, 345, 348, 
357 

positionnement 
absolu 339, 348 
des elements 338 
fixe 339, 357 
flottant 338 
relatif 345 

selon le flux normal 338 

profile (attribut) 29 

propriete 

background 273 
background-attachement 27 1 
background-color 260, 366 
background-position 266 
background-repeat 264 
border 284, 370 
border-bottom 285 
border-bottom-color 283 
border-bottom-style 279 
border-bottom- width 281 
border-collapse 372 
border-color 258, 283 
border-left 285 
border-left-color 283 
border-left-style 279 
border-left-width 281 
border-right 285 
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border-right-color 283 
border-right-style 279 
border-right- width 28 1 
border-spacing 372 
border-style 277 
border-top 284 
border-top-color 283 
border-top-style 279 
border-top-width 28 1 
border- width 28 1 
bottom 345 
caption-side 370 
clear 343 
color 258 

counter-increment 397, 401 
counter-reset 396, 401 
display 336, 370, 389, 406, 
411,419 

list-item 406, 411 
empty-cells 366, 373 
float 289, 339 
font-family 297, 419 
font-size 300, 314, 419 
font-style 310 
font- variant 312 
font-weight 308 
height 276, 330 
JavaScript, zlndex 360 
left 345 

letter-spacing 321 
line-height 314 
list-style-image 406 
list-style-position 393, 405 
list-style-type 389 
margin 287 
margin-bottom 287 
margin-left 287 
margin-right 287 
margin-top 287 
max-height 334 
max-width 334 
min-height 334 
min-width 334 
orphans 428 
outline-color 293 
outline-style 292 
outline-width 293 
overflow 332, 334, 380 
padding 289 
padding-bottom 290 
padding-left 290 
padding-right 290 
padding-top 290 



page-break-after 425 
page-break-before 425 
page-break-inside 427 
position 289, 345, 348, 357 
right 345 

table-layout 379, 382 

text-align 146, 317 

text-decoration 312 

text-indent 319 

text-transform 312 

top 345 

visibility 360 

white-space 322 

widows 427 

width 276, 330 

word-spacing 321 

z-index 348, 359 
pseudo-classe 242 

:active 243, 325 

:first 429 

: first-child 244 

:focus 243, 325 

:hover 243, 325, 360 

:lang 244 

:left 429 

:link 243, 325 

:right 429 

:visited 243, 325 

applicable aux liens 243 

d'impression 429 

dynamique 243 
pseudo-element 242, 244 

:after 245, 397 

:before 245, 397 

: first-letter 244 

: first-line 245 

first-letter 301 
puce graphique 73, 406 

Q 

QuickTime 94, 97 
R 

raccourci font 316 
readonly (attribut) 177, 181, 183 
referencement du site 20 
regies de base de XHTML 12 
rel (attribut) 29, 1 10 
repeat-x (mot-cle) 265 
repeat-y (mot-cle) 265 
retour a la ligne 69 
rev (attribut) 29, 110 



rgb() (fonction) 253 
right 

mot-cle 266 

propriete 345 
rows (attribut) 181, 207 
rowspan (attribut) 150, 153 
rules (attribut) 138, 141, 147 

s 

saisie de texte 175, 181 
saut de page 425 

interne 428 
script PHP 25 
scroll (mot-cle) 271 
scrolling (attribut) 208 
selected (attribut) 188 
selecteur 230, 231 

contextuel parent-descendant 
240 

d'attribut 236 

d' elements adjacents 241 

d'identifiant id 235 

de valeur d'attribut 237 

parent-enfant 241 

pseudo-classe 242 

pseudo-element 242 

selectionner 
plusieurs elements 232 
un seul element 232 

universel 232 
sens de lecture du texte 61 
sensibilite a la casse 12 
SGML 7 

shape (attribut) 89, 110, 126 
size (attribut) 176, 179, 187, 194 
son insertion 100 
span (attribut) 147 
specificite des styles 250 
src (attribut) 85, 208 
standby (attribut) 93, 97 
structure minimale d'un document 

XHTML 1.1 24 
structurer l'information 45 
style 

attribut 10, 247 

d'impression 418 

de lien 324 

de police 310 

des liens 297 

du contour 292 

du texte 297 

physique 67 

syntaxe d'ecriture 230 
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subject (mot-cle) 130 
summary (attribut) 139 
superposition 359 
syntaxe d'ecriture d'un style 230 

T 

tabindex (attribut) 89, 172, 187 
tableaux 135, 199 

alignement du contenu 145 
bordure 

des cellules 372 

externe 138 

fusionnee 376 

interne 138 

separee 372 
cellule 136 

espacement 138 

vide 373 
couleur 

de fond 365 

des cellules 366 
determiner la largeur 379 
en-tete 136, 140 
fusion 

de colonnes 150 

des cellules 149, 150 
de lignes 153 

gestion des dimensions 366 
groupe 

de colonnes 140, 147 

de lignes 140 
imbrication 156 
irreguliers 149 
largeur 138 

des bordures 138 
mise en page 135 
organisation 

d'une page 158 

des formulaires avec des 199 
pied de tableau 140 
style de 365 
titre 370 
table-layout (propriete) 379, 382 
taille des caracteres 301 



target (attribut) 129, 221 
text-align (propriete) 146, 317 
text-decoration (propriete) 312 
texte 

alignement 317 
horizontal 317 

barrer un 313 

clignotant 313 

en gras 68 

en italique 68 

espacement 317 

graisse du 308 

indentation 318 

justifier un 317 

modifier la casse d'un 312 

preformate 55 

presentation du 312 

souligner un 312 

surligner un 313 

taille 68 
text-indent (propriete) 319 
text- transform (propriete) 312 
title (attribut) 10 
litres 45 

d'un tableau 370 

niveaux de 45, 46 

top 

mot-cle 267 

propriete 345 
transfert de fichiers 167, 193 
transparent (mot-cle) 260 
type 

attribut 29, 35,93, 95, 172 
de media 30 

U 

unites 252 
absolues 

cm 253 

in 253 

mm 253 

pc 253 

pt 253 
de longueur 253, 305 



pourcentages 253 
relatives 
em 253 
ex 253 
px 253 
urlQ (fonction) 262 
usemap (attribut) 86, 127, 128 

V 

validation du code CSS 231 

valign (attribut) 141, 145 

value (attribut) 173, 176, 183, 192 

video 98 

visibility 359 

visibility (propriete) 360 

W 

W3C8 

WAV, fichier 102 
white-space (propriete) 322 
widows (propriete) 427 
width 

attribut 85, 138, 147, 160, 162 

propriete 276, 330 
window.open() (mefhode JavaS- 
cript) 129 
Windows Media Player 94 
Word, lien vers un document 1 14 
word-spacing (propriete) 321 

X 

XHTML 7 

XHTML 1.0, variantes 27 
XML 7, 23 

lang (attribut) 10, 27 

preserve (attribut) 36 

space (attribut) 35 
XMLNS (attribut) 28 

Z 

zlndex (propriete JavaScript) 360 
z-index (propriete) 348, 359 



